HTML-listojen loistava käyttö Web Designissa

Löydät hyvin suunnitellut luettelot ympäri Internetiä. Suunnittelijat ovat käyttäneet niitä vuosikymmeniä koordinoi sivun tiedot ja asettelut, ja nykyisessä verkossa voit nähdä suuren luovuuden, miten web-suunnittelijat käyttävät luetteloita. Näitä ovat navigointivalikot, profiililinkit, arkistot, tehtävät / tarkistuslistat ja muut käyttötarkoitukset!

Tässä viestissä esittelen erilaisia HTML-luetteloita, joissa on vinkkejä niiden suunnitteluun, erityisesti miten lisää ainutlaatuinen reuna luetteloon. Otan sinut myös läpi muutamia esimerkkejä verkkosivuista, joissa on upeita luettelomalleja, ja lopulta saat luettelon verkkosivuista, joissa on kauniisti suunnitellut HTML-luettelot. Ei ole enää epäilystäkään siitä, miten tavalliset näkymäluettelot näyttävät ainutlaatuisilta, ja alkaako tehdä niistä parhaan hyödyn tänään!

Listointielementit

Web-suunnittelijat hyppäävät jatkuvasti yhdestä kaistaverkosta toiseen, mikä aiheuttaa verkkosivujen tyylien muuttumisen ajan myötä, mutta luettelot ovat kestäneet ajan testejä ja saattavat olla hyvinkin hyviä tulevaisuuden innovaatioissa World Wide Webissä.

Ennen kuin tarkastelet esimerkkejä, haluan kattaa muutaman pisteen HTML-listoilla. On olemassa muutamia erilaisia listoja, joita voit käyttää omassa suunnittelutyössä. Suurin osa web-suunnittelijoista keskittyy Järjestämättömät luettelot jotka avataan a

Tilatut listat

Tietojen määritelmät

Järjestämättömät luettelot (
)

Mahdollisesti yksi HTML4 / HTML5-standardien käytetyimmistä elementeistä. Järjestämättömät luettelot antavat tietoja samalla tavalla kuin tilattu lista, kuitenkin ei näe mitään numeromerkkejä sivulle. Sen sijaan jokaiselle kohdalle annetaan a pieni ympyrä tai levy ja jaoteltu uuteen riviin. Tämä kuvake voidaan myös muuttaa luettelotyyli-tyyppisellä ominaisuudella CSS: ssä.

Alla on järjestämättömän luettelon esimerkkikoodi:

  Kohta 1
 Kohta 2
 Kohta 3

Järjestämättömät listat ovat täydellinen korjausrakennus navigointilinkit. Koska voit helposti sijoittaa koko luettelon mihinkään listan kohtaan se on yksinkertainen asia, jos haluat luoda sub-navigointilinkkejä yhtä hyvin. Kun olet poistanut luettelotyylin, sinulle jää tyhjä elementti. Täältä voit suunnitella ankkurilinkkejä, jotka näkyvät lohkoelementeinä sivullesi, täyttäen siten navigointivalikon suunnittelun ja joidenkin jQuery-koodien avulla voit koota kauniita otsikon sivustoosi.

Yleisimmin löydät järjestämättömät luettelot verkkosivustojen tai asennusohjeiden keskellä. Huomaa tämä Google ja muut hakupisteet eivät käsittele sivusi sisältöä eri tavalla, niin sinun SEO: tä ei pitäisi vaikuttaa riippumatta siitä, minkä tyyppistä luetteloa valitset.

Tilatut listat (
)

Kun haluat tilata tietosarjan, on mahdollista perustaa oma ulkoasukehys tyhjästä, mutta tällä tavoin sinun on lisättävä jokainen lisäysnumero käsin, mikä voi olla väsyttävää. Tilatut luettelot ovat hyviä pitää numeroituja tehtäviä linjassa ilman ruuveja. Sisäisten luettelorakenteiden järjestys (

) sanelee, miten tiedot esitetään.

Alla on esimerkkikoodi järjestetystä luettelosta:
```
  Kohta 1
 Kohta 2
 Kohta 3
 
 
```
Se on myös mahdollista vaihda laskuri tavallisista numeroista muutamaksi vaihtoehdoksi. Nämä sisältävät aakkosellinen kirjain ja roomalaiset numerot, vain muutamia. Web-suunnittelijat käyttävät tilattua luetteloa sisältökohtaisiin luetteloihin. Reseptitiedot, päivittäiset tehtävät, suosikit, tai top / viime kirjautuneet käyttäjät ovat vain muutamia esimerkkejä. Näet usein blogin kommentit rakennettu käyttäen tilattuja luetteloita, jotta jokainen kommentti voidaan pitää numeroidussa järjestyksessä.

Tietojen määrittelyluettelot (
)

Määrittelyluetteloita ei enää näy kovinkaan usein (ei niinkään kuin ne olivat aina suosittuja). Niitä oli aiemmin nähty web-suunnittelijoilla, jotka luovat monimutkaisia linkkien tai laatikon sisällön muotoja. tietolistan tunniste (
) kooderit ovat usein väärin ymmärtäneet tänään. HTML4.01: ssä käytettiin erikoisluetteloita pari kohteita ja niiden kuvaukset. Näitä kutsuttiin määritelmäluetteloksi.

Alla on esimerkki datan määrittelyluettelosta:
```
  Kohta 1
 Kuvaus
 Kohta 2
 Kuvaus
 Kohta 3
 Kuvaus
 
 
```
Uusien HTML5-spesifikaatioiden avulla tietoluettelot ovat kuitenkin saaneet transkription. Syntaksi ei sisällä eroja elementtien käytössä, mutta niiden tarkoitus on päivitetty a kuvausluettelosta, joka koostuu yhdestä tai useammasta
), jota seuraa yksi tai useampi määritelmä (
).

Vahva esimerkki HTML5-lääkärin artikkelista on a metatietojen muotoilulista. Sisällä yksi dl listan elementti määritellä termi, kuten nimesi, sitten jokainen seuraava määrittelytunniste voisi kuvata tietoja sinusta, mahdollisesti ikäsi, miehenne, nykyinen kaupunki, kaupunki jne. Lopulta mikä tahansa joukko dataa avain / arvo-parien kanssa sopii hyvin kuvausluetteloon. Voit käyttää luettelossa useampaa kuin yhtä tietotermiä, mutta W3C sanoo Kunkin aikavälin tulisi olla ainutlaatuinen luettelossa.

Nyt kun olemme asettaneet 3 suosikkilistan tyyliä, siirrymme joitakin esimerkkejä! Web-suunnittelijat ovat saaneet erittäin luovia listoja viime vuosina. Olen luetteloinut 7 alla olevaa suosikkisivustoa ja keskittynyt erityisesti luetteloiden luovaan käyttöön.

Yksinkertainen järjestämättömän luettelon navigointi

Navigointivalikot ovat paljon helpompia rakentaa nykyaikaisilla CSS-tekniikoilla. Siksi järjestämättömät luettelot ja jopa tilatut luettelot ovat tulleet suosituiksi vaihtoehdoiksi. Yksi suosikkini esimerkkini tästä näkyy sosiaalisen median blogissa Mashable.

Kohti otsikon yläreunaa huomaat 2 pääsarjaa. Suoraan alkuun niiden logo on pieni järjestämätön luettelo, joka sisältää yhteisön linkkejä, kuten Top Stories, Trending Topics ja People. Suunnittelija on luonut tyylikkään hover-tyylin, jossa on vankka tausta ja värimaailma.

Suoraan tämän alapuolella näkyvät niiden alivalikon linkit. Tämä navigointivalikko johtaa blogikategorioihin, kuten sosiaaliseen mediaan tai tekniikkaan. Molemmat järjestämättömät luettelot sisältyvät a HTML5
elementti pitää kaikki inline mallin kanssa. Tässä lisätyt hoverefektit näyttävät pyöristetyn kulman alivalikkovalikon ympärille. Jokainen linkki näkyy lohkoelementtinä ja vie paljon tilaa alivalikkovalikosta.

Ohjelmistojen ominaisuudet

Tämä on ehkä yksi suosikkini esimerkkejä tyylistä listoista. Web-kehittäjät ja ohjelmistoyritykset käyttävät näitä omassa yritysverkkosuunnittelussaan. Esimerkkini keskittyy Kulttuurikoodin asioiden sivulle, tehtäväluettelosovellukseen. He ovat rakentaneet a muotoiltu joukko kohteita ja ominaisuuksia löydät asioista.

Koko kokoelma on sisällä a
tunniste, jossa on sekä vasen että oikea sarake. Sisällä on kelluva
elementit, joissa on vasen ja oikea luokka, vastaavasti. Luettelomateriaalin sisältö on itse asiassa osiin ja CSS: ää käytetään kaiken sovittamiseen.

Kuvat lisätään tunnisteet suoraan koodiin ja sijoitettu suhteessa niiden sisältämään
. vahva tunnisteet käytetään jokaiselle otsikkopisteelle, jotka näkyvät tummemmalla tekstillä, ja suoraan tämän jälkeen lisätään kuvaus.

Elementit koottiin kauniisti ja ihailen suuresti Kulttuurikoodin työetiikkaa. Ne ovat osoittautuneet tarjoamaan upeita malleja vuosien varrella, erityisesti asioiden osalta. Jos tarkistat minkä tahansa kuvakkeen hakemiston, kuten Icon Finder, on melko yksinkertaista valita joukko ilmaistarjouksia, ja täältä voit mallintaa ja koodata samanlaisen tyylin CSS: ssä.

Jos olet kiinnostunut suunnittelustaan, iPhonen asiat -sivulla on todella kuvausluettelo. Jokainen kuvake on määritetty termi ja kuvaukset on sijoitettu oikealle. Tämä ei ole suositeltava tapa käyttää näitä tunnisteita, mutta se toimii hyvin joissakin tilanteissa!

Blogikategoriat ja tunnisteet

WordPress-käyttäjät ovat hyvin perehtyneet luokkien / tunnisteiden järjestelmään. Se on toiminut hyvin useimmissa sosiaalisen median muodoissa toistaiseksi, mutta se on alun perin peräisin blogosfääristä. Tunnisteet ovat loistavia näyttämään muutamia aiheeseen liittyviä niche-artikkeleita. Luokat ovat paljon laajempia ja niitä käytetään suurempaan osaan artikkeleistasi.

Paras esimerkki siitä, mitä voin ajatella, on Smashing Magazine ja heidän uusi kotisivusi uudelleen. Ylhäällä huomaat välilehden, joka on merkitty “aikakauslehti” pienellä tagikuvakkeella, joka roikkuu sivulta. Voit tuoda näkyviin piilotetun luettelon kategorioista, kuten koodauksesta, suunnittelusta, grafiikasta jne., Ja jokainen on myös tyylikkäästi CSS3-hover-efektillä, joka näkyy kiiltävinä painikkeina.

Tarkastellessasi koodia huomaat, että olet asettanut tämän ruudun vasemman sarakkeen alueelle. Se on annettu a näyttö: ei; tyyli näkyvät piilossa, kunnes ne laukaistaan. Järjestämätön lista määritetään jokaisella listayksiköllä, joka sisältää ankkurilinkin, mutta vaihtoehtoisesti nämä linkit näytetään linjassa ja rikkoutuivat kahteen riviin vaadittua tilaa varten.

Alatunnisteiden sarakkeet, joissa on määritelmät

Olin aina suuri fani klassisesta Digg-suunnittelusta. Se sisälsi kaiken mitä odotat uutissivustolta, jolla on suuret sosiaaliset ominaisuudet. Yksi todella mielenkiintoinen pala heidän vanhaan muotoiluunsa on alatunnisteiden sarakkeet määritysluetteloita käyttäen.

Digg-miehistö on valitettavasti jo käynnistänyt v4-suunnittelun, mutta Internet on nostalginen paikka, ja Wayback-Internet-arkiston avulla voimme vetää vanhemman Digg-muotoilun elokuussa 2007. Tämä malli sisältää paljon fantastisia käyttöliittymiä, mutta tarkemmin tarkentakaa alatunnistealueelle. Huomaat, että jokainen sarake on todella hajotettu a tietojen luettelon elementti. Nämä sarakkeet ovat asetettu näyttämään lohkoina ja kelluvat vierekkäin ennalta määritetyllä leveydellä.

tietojen termit käyttäytyvät otsikoina näkyvät luettelossa ja näkyvät vain kerran sarakkeessa. Mielestäni tämä on paljon mukavampi ja puhtaampi tapa rakentaa kuvausluetteloita. On mahdollista käyttää useampaa kuin yhtä termiä luetteloa kohden, mutta tämä usein sekoittaa HTML-koodisi ja voit menettää koodin seurannan hyvin nopeasti. Kaksi ensimmäistä saraketta sisältävät 6-7 linkkiä, jotka on lueteltu alla toistensa muodossa otsikon tekstin kuvaamiseksi, mutta tämän jälkeen huomaat, että sarakkeet ovat poissa oletusmuotoilusta.

Esimerkiksi alla Digg Tools & API on vain kaksi datan määritelmää. Nämä ovat itse asiassa 2 kappaletta, jotka sisältävät sisäisen linkin ja lauseen. Tässä merkinnässä ei varmasti ole mitään vikaa, ja se on todella luova ja kestävä järjestelmä alatunnisteiden sarakkeiden rakentamiseen. Olen varma, jos selaat Diggin sivujen arkistoja, löydät loistavia esimerkkejä listoista.

Tehtävät ja tehtävät

Luetteloita ei aina sisällytetä suunnittelutyyleihin. Oikeastaan on sisältöä edellyttää, että luettelon kohteet muodostavat todellisen tietoluettelon. Tehtäväluettelot ovat täydellinen esimerkki näistä ilmiöistä. Verkossa ei kuitenkaan ole rakennettuja tehtäviä, joten on vaikea löytää hyviä esimerkkejä.

Flow App on yksi tällainen palvelu, jossa on kaunis käyttäjäpaneeli. Jos sinulla on aikaa, suosittelen, että rekisteröin ilmaisen tilin, jotta sovellus voi olla demo. Vaikka et aio maksaa, se on silti erittäin hauska web-sovellus, jonka avulla voit sotkea ympäriinsä ja voit jopa vetää pois joitakin suunnittelun inspiraatiota.

Jos olet kirjautunut sisään, vasemman alareunan valikko lajittelee luetteloluettelosi. Nämä ovat tehtäviä, joita voit järjestää uudelleen, muokata, merkitä ja tarkistaa. Napsauttamalla ensimmäistä oletuslistaa “Perusteet” avaa sisällön oikeassa ruudussa, täällä koko luettelorakenne on rakennettu järjestämättömällä listalla.

Jokainen kohde sisältää melko suuren määrän sisäistä kontekstia. Jokainen baari, jonka näet eri esityksissä yhteen luetteloon lisätään
elementti. On myös paljon sisäisiä kohteita, kuten muokkauskuvake, täydennys-valintaruutu, lippu ja roskakuvake. Myös alla olevat sivuvalikon linkit “fokus” huomaat rakennetut kohteet asetetaan järjestämättömään luetteloon. Se näyttää upealta sen yksinkertaisuuden vuoksi.

Dribbble-pelaajien luettelo

Monien muiden suunnittelijoiden ohella olen valtava Dribbble-addikti. Sivusto on rakennettu kauniisti ja siinä on joitakin parhaita graafisia suunnittelijoita ympäri maailmaa. Jos et tunne verkkoa, Dribbble on vain web-suunnittelijoiden kutsuva sosiaalinen yhteisö, joka jakaa kuvansa uusimmasta työstään.

Asiat kiinnostavat, jos kiinnität huomion sivupalkin alaosaan. Täällä meillä on järjestetty lista luokan kanssa “pelaajat-lista“. Siinä on rookies, jotka ovat uusimpia suunnittelijoita ja jotka ovat allekirjoittaneet verkkosivuston viime aikoina. Dribbllen web-kehittäjä on päättänyt käyttää jotakin järjestetty luettelo jokaisella luettelorakenteella, joka sisältää käyttäjän tietoja.

Sisäinen sisältö on todella hajotettu kahteen segmenttiin.
oikealla oleva kelluva linkki jos olet kirjautunut sisään. Vaihtoehtoinen elementti näyttää a
otsikon kanssa “vcard” sisältää käyttäjän nimen ja avatarin. Nämä molemmat liittyvät heidän henkilökohtaiseen Dribbble-profiiliinsa ja joitakin tilitietoja.

Horisontaaliset Breadcrumbs

On joitakin upeita esimerkkejä ja kirjallisia parhaita käytäntöjä leipäkorjauksen rakentamiseen. Nämä valikot näyttävät näkyvästi kokoelma osa-linkkejä, jotka olet kulkenut nykyisen sivun saavuttamiseksi. Meillä on fantastinen pähkinäkurssi, joka on esitelty Hongkiatissa, joka on rakennettu täysin CSS3-tekniikoilla ja järjestämättömillä listoilla.

Suunnittelu käyttää ankkurilinkit lohkoelementteinä näyttää luettelovalikon. Ankkurilinkille annetaan taustakuva ja a vähenevä z-index ominaisuus niin, että nuolet näkyvät kunkin samanaikaisen elementin päällä.

Tutustu myös Googlen esimerkkiin yhdellä niiden tukisivulta. Tämä on täydellinen sivuelementti, joka sisällytetään omaan verkkosivustoon, jos sinulla on useita sisäkkäisiä sivuja. Vierailijat odottavat todennäköisesti palaavansa edellisiin sivuihin tarkistamatta heidän historiaansa.

Ei ole liian monta vaihtoehtoa, kun haluat luoda luettelon leipäkorjauslinkeistä. Voit käyttää tilattua luetteloa niin hakukoneiden indeksoijat ymmärtävät, että valikkolinkkejä on järjestetty, Kuitenkin kuten edellä todettiin, tämä ei todennäköisesti tee liian suurta eroa SERPS: n sijoittelussa. Jos sinulla on monimutkaisempia tarvikkeita leipäkirjoille, kuten kunkin linkin otsikko / kuvaus, voit käyttää paremmin määritelmäluettelon elementtiä.

Kauniimpi lista-pohjainen käyttöliittymä

Liikkumatta liian paljon yksityiskohtiin on minun tavoitteenani kerätä loistava luettelo luetteloon perustuvista rajapinnoista. Tämä on paljon helpompaa sanoa kuin tehty - mutta Internetissä on niin paljon vaihtoehtoja, joista voit valita! HTML-luetteloiden valtakunnassa on runsaasti kasvua. Jos kuolet lisää inspiraatiota, tutustu alla olevaan mini-galleriaan upeilla esimerkeillä.

6wunderkinder

Fantastinen navigointivalikko, joka on muotoiltu painikkeiksi.

Cake Sweet Cake

Cake Sweet Cakeissa on kaunis luettelo pikkukuvista, jotka sisältävät herkullisia näytteitä niiden leipomoteoksista.

Cheesemonger Invitational

Cheesemonger Invitational -sivustossa on kaksi erillistä
elementit kelluvat luoda 1 navigointivalikko. Se näyttää todella siistiltä keskitetyn logo-grafiikan mukaisesti.

Threepenny-editori

Sosiaalisen median linkit Threepenny Editorin verkkosivun alaosassa ovat kaikki luettelossa. Se sopii täydellisesti käsi- ja paperisuunnittelun teeman sarakkeeseen.

Le Tipi

Toinen kaunis esimerkki navigointivalikosta, jossa on kuvia ja CSS.

Tiedät kyllä kuka

Tiedät kuka sisältää kuvitteellisen retro-design-vaikutuksen verkkosivuillaan. Kotisivun alaosassa on pieni tilauslista, joka sisältää viimeisimmän projektityön pikkukuvat.

MediaLoot

MediaLootin rekisteröintisuunnitelmien järjestämätön lista näyttää lupaavalta.

365psd

365psd tarjoaa upouuden Photoshop-mallin ladattavaksi joka päivä. Sivupalkissa on luettelo järjestämättömään luetteloon rakennetuista tunnisteista. Tämä näyttää täydelliseltä blogeissa ja arkistosivuilla, joissa pieni tagilista tuntuu sopivalta.

johtopäätös

Toivottavasti tämä luova HTML-tyylisten luetteloiden galleria on antanut sinulle inspiraatiota ulkoasun sisällön suunnitteluun. Se voi olla vaikeaa naulata konkreettinen ajatus listoistasi verkkosivuilla, mutta nimiluettelot ovat suuri osa suunnitteluprosessia ja tarjoavat rakentavia suhteita merkintätunnisteiden ja sisällön välillä.

Webissä on luultavasti kymmeniä muita loistavia luetteloita, ja yhä useammin saatavilla olevien web-suunnittelijoiden lukumäärä kasvaa varmasti nopeammin kuin koskaan. Jos tiedät hienosta verkkosivustosta, jossa on mahtavia HTML-luetteloita, voit vapaasti tarjota linkkejä alla olevaan kommenttiosioon. Jos lisäät jonkin edellä mainituista tyyleistä omaan sivustoosi, haluaisimme tarkistaa sen!
Tuo Office 2003 -valikot takaisin vuoteen 2010 UBitMenu

Tuo Windows 7 Start Menu Windows 10 een Classic Shellillä

Kirkastaa Firefoxia juhlapäivinä