Yhdistelmäluettelon luominen html:llä. Sisäkkäiset luettelot, joissa on automaattinen numerointi

Numeroidut luettelot ovat kokoelma elementtejä sarjanumeroineen. Numeroinnin tyyppi ja tyyppi riippuvat elementin parametreista

, jota käytetään luettelon luomiseen. Seuraavat arvot voivat toimia numerointielementteinä:
• arabialaiset numerot (1, 2, 3, ...);
• Arabialaiset numerot, joiden alussa on nolla alle kymmenen (01, 02, 03, ...,10) numeroille;
• latinalaiset isot kirjaimet (A, B, C, ...);
• pienet latinalaiset kirjaimet (a, b, c, ...);
• isot roomalaiset numerot (I, II, III, ...);
• pienet roomalaiset numerot (i, ii, iii, ...);
• Armenian numerointi;
• Georgian numerointi.

Käytännön näkökulmasta kohtien näyttämisen periaatteita luettelomerkittynä luettelona voidaan soveltaa samalla tavalla kuin numeroitua luetteloa. Mutta koska kyseessä on luettelointi, on joitakin ominaisuuksia, joista keskustellaan edelleen.

Listan numerointi

Luettelon saa aloittaa mistä tahansa numerosta; elementin start-attribuuttia käytetään tähän tarkoitukseen

tai elementin arvo
1. . Arvo on mikä tahansa positiivinen kokonaisluku. Sillä ei ole väliä, minkä tyyppinen numerointi on asetettu, vaikka latinalaisia ​​kirjaimia käytettäisiin luettelona. Jos sekä alku- että arvoattribuutteja käytetään luettelossa samanaikaisesti, jälkimmäinen on etusijalla ja numerointi näytetään arvon määrittämästä numerosta, kuten esimerkissä 1.

   Esimerkki 1: Listan numeroinnin muuttaminen

   4. Työpaikasta kannattaa pitää hyvää huolta.
   5. Säädä huoneen valaistus siten, että valonlähde sijaitsee käyttäjän sivulla tai takana.
   10. Lääketieteellisten komplikaatioiden välttämiseksi on suositeltavaa valita tuoli, jossa on pehmeä istuin.

   Tämän esimerkin luettelon ensimmäinen elementti alkaa roomalaisella numerolla IV, koska määritetään start="4"-attribuutti, sitten tulee numero V ja viimeinen elementti tulee epäjärjestystä ja sille annetaan numero X (kuva 1).

   Riisi. 1. Roomalaiset numerot luettelossa

   Numeroiden kirjoittaminen

   Oletusarvon mukaan numeroidulla listalla on tietty ulkoasu: ensin on numero, sitten piste ja sen jälkeen teksti näytetään välilyönnillä erotettuna. Tämä kirjoitusmuoto on visuaalinen ja kätevä, mutta jotkut kehittäjät haluavat nähdä eri tavan suunnitella luetteloiden numerointi. Nimittäin siten, että pisteen sijasta on sulkusulku, kuten kuvassa 10 näkyy. 2 tai jotain vastaavaa.

   

   Riisi. 2. Numeroitu luettelonäkymä suluilla

   Tyylien avulla voit muuttaa luettelon numerointityyppiä sisällön ja vastalisäysominaisuuksien avulla. Ensin ol-valitsin on asetettava asentoon counter-reset : item , tämä on tarpeen, jotta jokaisen uuden listan numerointi alkaa alusta. Muussa tapauksessa numerointi jatkuu ja 1,2,3:n sijaan näet 5,6,7. Nimikkeen arvo on laskurin yksilöllinen tunniste, jonka valitsemme itse. Seuraavaksi sinun on piilotettava alkuperäiset merkit tyyliominaisuuden list-style-type kautta arvolla none .

   Sisältö-ominaisuus toimii yleensä yhdessä pseudoelementtien ::after ja ::before kanssa. Siten li::before-konstruktio sanoo, että ennen jokaista listan elementtiä on lisättävä jotain sisältöä (esimerkki 2).

   Esimerkki 2. Oman numerointisi luominen

   Li::before ( sisältö: laskuri(tuote) ") "; /* Lisää numeroihin sulkumerkki */ counter-increment: item; /* Aseta laskurin nimi */ )

   Sisältö-ominaisuus, jossa on arvo counter(item), näyttää numeron; Lisäämällä sulut, kuten tässä esimerkissä näkyy, saamme tarvittavan numerointityypin. vastalisäystä tarvitaan listan numeron kasvattamiseksi yhdellä. Huomaa, että kaikkialla käytetään samaa tunnistetta nimeltä item . Lopullinen koodi näkyy esimerkissä 3.

   Esimerkki 3: Luettelonäkymän muuttaminen

   1. Ensimmäinen
   2. Toinen
   3. Kolmanneksi
   4. Neljäs

   Yllä olevalla menetelmällä voit tehdä minkä tahansa tyyppisen numeroidun luettelon, esimerkiksi laittaa numeron hakasulkeisiin, tässä tapauksessa vain yksi rivi muuttuu tyyleissä.

   Sisältö: "[" laskuri(tuote) "] ";

   Luettelo venäjän kirjaimilla

   Siellä on numeroitu luettelo latinalaisilla kirjaimilla, mutta luettelossa ei ole venäläisiä kirjaimia. Ne voidaan lisätä keinotekoisesti käyttämällä yllä olevaa tekniikkaa. Koska numerointi tapahtuu tyylien kautta, itse lista pysyy alkuperäisenä, siihen lisätään vain valittu luokka, kutsutaan sitä kyriliksi (esimerkki 4).

   Esimerkki 4: Koodi luettelon luomiseksi

   1. Yksi
   2. Kaksi
   3. Kolme

   Kirjainten lisääminen tapahtuu pseudoelementillä ::before ja content -ominaisuudella. Koska jokaisella rivillä on oltava oma kirjain, käytämme pseudoluokkaa :nth-child(1) , jonka kirjainnumero kirjoitetaan sulkeisiin. Ensimmäinen kirjain on luonnollisesti A, toinen on B, kolmas on C jne. Tämä koko joukko lisätään li-valitsimeen seuraavasti (esimerkki 5).

   Esimerkki 5: Pseudoluokka:nth-lapsi

   Kyriliini li:nth-child(1)::ennen ( sisältö: "a)"; ) .kyrillinen li:nth-child(2)::before ( sisältö: "b)"; ) .kyrillinen li:nth-child(3)::before ( sisältö: "at)"; )

   Tässä esimerkissä jokaista kirjainta seuraa sulkumerkki, kaikki kirjaimet ovat pieniä. Voit määrittää oman tyyppisi luettelonumerointiin, esimerkiksi se voi sisältää isoja kirjaimia pisteellä, yhdellä tai kahdella hakasulkeella tai vain kirjaimia. Toisin kuin tavallinen numerointi, voimme vapaasti tehdä täällä mitä haluamme. Kymmenen kirjaimen luettelon pitäisi riittää melkein kaikkiin tilanteisiin, mutta jos tämä yhtäkkiä osoittautuu riittämättömäksi, mikään ei estä meitä laajentamasta luetteloa sisältämään ainakin kaikki venäjän aakkosten kirjaimet.

   Lopuksi säädämme kirjainten kohdistusta ja sijaintia, valinnaisesti määritämme fontin koon, värin ja muut parametrit (esimerkki 6).

   Esimerkki 6. Luettelo venäjän kirjaimilla

   1. Borssikeitto
   2. Hauen kotletteja
   3. Kulebyaka
   4. Sienet smetana
   5. Pannukakkuja kaviaarilla
   6. Kvass

   Tulos tämä esimerkki esitetty kuvassa. 3.

   Listat ovat osa Jokapäiväinen elämä. Tehtävälista määrittelee, mitä on tehty. Navigointireitit tarjoavat vaiheittaisen luettelon reittiohjeista. Reseptit vaativat luettelon ainesosista ja ohjeluettelon. Listoja löytyy melkein kaikkialta, joten on helppo ymmärtää, miksi ne ovat suosittuja myös Internetissä.

   Kun haluamme käyttää luetteloa verkkosivustolla, HTML tarjoaa kolme eri tyyppiä, joista valita: luettelomerkitty, numeroitu ja kuvausluettelo. Se, minkä tyyppistä luetteloa käytetään ja käytetäänkö luetteloa ollenkaan, riippuu sisällöstä ja semanttisesti sopivimmasta vaihtoehdosta sen näyttämiseen.

   Kolmen lisäksi eri tyyppejä HTML-muotoisia luetteloita, on useita tapoja muotoilla nämä luettelot CSS:n kautta. Voimme esimerkiksi valita, minkä tyyppisen luettelomerkin määritetään luettelolle. Merkki voi olla neliö, ympyrä, numero, kirjain tai mahdollisesti ei mitään. Lisäksi voimme päättää, miten luettelo näytetään - pysty- vai vaakasuunnassa. Kaikilla näillä vaihtoehdoilla on tärkeä rooli verkkosivujemme muotoilussa.

   Luettelomerkityt luettelot

   Luettelomerkitty tai järjestämätön luettelo on yksinkertaisesti luettelo toisiinsa liittyvistä kohteista, joiden järjestyksellä ei ole väliä. Luettelomerkeillä varustetun luettelon luominen HTML:ssä tehdään käyttämällä estoluetteloelementtiä

   . Jokainen luettelon yksittäinen kohde on merkitty elementillä
   • .

     Oletuksena useimmat selaimet lisäävät elementtiin pystymarginaalin ja vasemman täytön

     , ja ennen jokaista elementtiä
     • asettaa yksivärisen pisteen. Tätä pistettä kutsutaan listamerkiksi ja sitä voidaan muuttaa CSS:n avulla.
       • Oranssi
       • Vihreä
       • Sininen

       Näytä luettelomerkitty luettelo

       Numeroidut luettelot

       Numeroitu tai tilattu luettelo kohteista

       Hyvin samanlainen kuin luettelomerkitty luettelo, yksittäiset luettelomerkit luodaan samalla tavalla. Suurin ero luetteloiden välillä on se, että järjestetyssä luettelossa kohteiden esittämisjärjestys on tärkeä.

       Koska järjestyksellä on väliä, numeroitu luettelo käyttää numeroita pisteen sijasta oletusluettelomerkkinä.

       1. Kävele Apricot Streetiä pitkin
       2. Käänny Vinogradnayalle

       Numeroidun listan esittely

       Numeroiduissa luetteloissa on myös yksilölliset attribuutit, kuten aloitus ja käänteinen.

       aloitusattribuutti

       Start-attribuutti määrittää numeron, josta numeroidun luettelon tulee alkaa. Oletuksena listat alkavat numerosta 1, mutta voi olla tilanteita, joissa listan pitäisi alkaa numerosta 30 tai jostain muusta numerosta. Kun käytämme elementissä start-attribuuttia

       , niin voimme tarkasti määrittää, mistä numerosta numeroidun listan laskeminen tulee aloittaa.

       Start-attribuutti hyväksyy vain kokonaislukuarvot, vaikka numeroidut luettelot voivat käyttää erilaisia ​​numerointijärjestelmiä, kuten roomalaisia ​​numeroita.

       30. Kävele Apricot Streetiä pitkin
       31. Käänny Vinogradnayalle
       32. Pysähdy Shady Streetillä

       Start-attribuutin esittely

       käänteinen attribuutti

       Käänteinen attribuutti, kun se lisätään elementtiin

       mahdollistaa luettelon näyttämisen käänteisessä järjestyksessä. Luettelo, jossa on viisi kohtaa, jotka on numeroitu 1–5, voidaan kääntää ja numeroida 5–1.

       Käänteinen attribuutti on Boolen attribuutti, eikä se sellaisenaan ota arvoa. Se voi olla totta tai tarua. False on oletusarvo, arvosta tulee tosi, kun elementissä näkyy käänteinen attribuutti

       .
       1. Kävele Apricot Streetiä pitkin
       2. Käänny Vinogradnayalle
       3. Pysähdy Shady Streetillä

       Käänteisen attribuutin esittely

       arvo attribuutti

       Arvo-attribuuttia voidaan käyttää yksittäisiin elementteihin

       1. numeroidussa luettelossa muuttaaksesi sen arvoa luettelossa. Arvo-attribuutin sisältävän luettelokohteen alapuolella näkyvä luettelokohteen määrä lasketaan uudelleen vastaavasti.

          Esimerkiksi, jos toisen luettelokohteen arvo-attribuutiksi on asetettu 9, kyseisen luettelokohteen numero tulostetaan ikään kuin se olisi yhdeksäs. Kaikki seuraavat listan kohdat numeroidaan 9:stä alkaen.

          1. Kävele Apricot Streetiä pitkin
          9. Käänny Vinogradnayalle
          10. Pysähdy Shady Streetillä

          Arvoattribuutin esittely

          Kuvausluettelot

          Toinen verkossa näkemäsi luettelo (mutta ei niin usein kuin luettelomerkityt tai numeroidut luettelot) on luettelo kuvauksista. Tällaisten luetteloiden avulla tunnistetaan useita termejä ja niiden kuvauksia, kuten esimerkiksi sanastossa.

          Kuvausluettelon luominen HTML:ssä tehdään lohkoelementillä

          . Elementin käytön sijaan

          Luettelon kohteiden merkitseminen edellyttää, että kuvausluettelossa on kaksi lohkoelementtiä:

          termille ja

          kuvausta varten.

          Kuvausluettelo voi sisältää useita termejä ja kuvauksia peräkkäin. Lisäksi tällainen luettelo voi sisältää useita termejä kuvausta kohden sekä useita kuvauksia termiä kohden. Yhdellä termillä voi olla useita merkityksiä ja se voi olla useiden kuvausten alainen. Toisaalta yksi kuvaus voi sopia usealle termille.

          Kun lisäät kuvausluetteloelementin

          täytyy mennä elementtiin

          . Termi ja sitä välittömästi seuraava kuvaus liittyvät toisiinsa. Siksi näiden elementtien järjestys on tärkeä.

          Oletuksena elementti

          sisältää pystysuoran pehmusteen, kuten elementtejä

          Ja
          . Lisäksi elementti
          sisältää oletusarvoisesti vasemman marginaalin.
          opinnot
          Ottaa aikaa ja huomiota opetettavan aineen tiedon hankkimiseen, erityisesti kirjojen kautta.
          hanke
          Lähetetty suunnitelma tai piirros, joka näyttää miltä rakennus, vaatetus tai muu esine näyttää ja toimii ennen kuin se rakennetaan tai tehdään.
          Olemassa olevat tavoitteet, suunnitelmat tai aikomukset ennen kuin ne ruumiillistuvat tai toteutuvat konkreettisessa esineessä.
          liiketoimintaa
          Job
          Henkilön vakituinen ammatti, ammatti tai ammatti.
          Kuvausluettelon esittely
          Sisäkkäiset luettelot
          Ominaisuus, joka tekee luetteloista erittäin tehokkaita, on sisäkkäisyysominaisuus. Jokainen luettelo voidaan upottaa toiseen luetteloon ja ne voidaan upottaa useita kertoja. Mutta kyky pesittää luetteloita loputtomasti ei anna sinulle vapautta tehdä niin. Listat tulee varata erityisesti sinne, missä niillä on semanttisin merkitys.
          Listojen sisäkkäisyyden temppu on tietää, missä kukin luettelo ja luettelokohde alkaa ja päättyy. Puhutaan erityisesti luettelomerkeistä ja numeroiduista luetteloista, jotka ovat ainoa elementti, joka voi näkyä suoraan sisällä
          Ja
          on elementti
          1. . Toistetaan - ainoa elementti, jonka voimme laittaa elementtien suoraksi jälkeläiseksi
             Ja
             , On
             1. .

                Kuitenkin elementin sisällä

             2. voidaan lisätä vakiosarja elementtejä, mukaan lukien kaikki elementit
                tai
                .

                Liitä luettelo - aloita ennen luettelokohteen sulkemista uusi lista. Kun sisäkkäinen luettelo on valmis ja suljettu, sulje sitä sisältävä luettelokohde ja jatka alkuperäisestä luettelosta.

                1. Ulkoiluttaa koiraa
                2. Taita pyykki
                3. Mene kauppaan ja osta:
                   • Maito
                   • leipää
                   • Juusto
                4. Ajaa nurmikko
                5. Keitä illallinen

                Sisäkkäisten luetteloiden esittely

                Koska sisäkkäiset luettelot voivat olla hieman hämmentäviä ja näyttää ei-toivottuja tyylejä, jos ne tehdään väärin, katsotaanpa niitä nopeasti. Elementit

                Ja
                voi sisältää vain elementtejä
                1. . Elementti
                2. voi sisältää minkä tahansa haluamasi säännöllisen elementin. Kuitenkin elementti
                3. on oltava jommankumman elementin suora jälkeläinen
                   , tai
                   .

                   On myös syytä huomata, että kun luettelot ovat sisäkkäisiä muiden luetteloiden sisällä, niiden merkit muuttuvat sisäkkäisyyden syvyyden mukaan. Edellisessä esimerkissä numeroidun luettelon sisällä sisäkkäinen luettelomerkitty luettelo käyttää ympyrää pisteen sijaan merkeinä. Tämä muutos johtuu siitä, että luettelomerkitty luettelo on sisäkkäin yhden tason numeroidun luettelon sisällä.

                   Onneksi voimme hallita, miltä luettelopisteet näyttävät millä tahansa tasolla, jota tarkastelemme seuraavaksi.

                   Listan kohteiden muotoilu

                   Luettelomerkityt ja numeroidut luettelot käyttävät oletusarvoisesti luettelokohteiden luettelomerkkejä. Luettelomerkeillä merkityissä luetteloissa nämä ovat yleensä yksivärisiä pisteitä, kun taas numeroiduissa luetteloissa ne ovat yleensä numeroita. Käyttämällä CSS-tyyli ja näiden merkkien asentoa voidaan säätää.

                   listatyylinen ominaisuus

                   List-style-type -ominaisuutta käytetään määrittämään luetteloalkiomerkin sisältö. Käytettävissä olevat arvot vaihtelevat neliöistä ja desimaaleista armenialaiseen numerointiin ja elementteihin voidaan lisätä CSS-tyyli

                   ,
                   tai
                   1. .

                      Mikä tahansa listatyylityyppisen ominaisuuden arvo voidaan lisätä luettelomerkittuun tai numeroituun luetteloon. Tämän vuoksi voit käyttää numerointia luettelomerkeissä ja ei-numeerisia luettelomerkkejä numeroiduissa luetteloissa.

                      • Oranssi
                      • Vihreä
                      • Sininen

                      Ul ( listatyyli -tyyppi: neliö; )

                      Listatyylityyppisen ominaisuuden esittely

                      listatyylityyppiset arvot

                      Kuten aiemmin mainittiin, list-style-tyyppinen ominaisuus sisältää kourallisen erilaisia ​​arvoja. Seuraavassa taulukossa on nämä arvot ja niitä vastaava sisältö.

                      Kuvan käyttäminen luettelomerkintänä

                      Saattaa tulla hetki, jolloin listatyylityyppisen ominaisuuden oletusarvot eivät riitä ja haluamme määritellä oman listamerkkimme. Tämä tehdään useimmiten asettamalla taustakuva jokaiselle elementille.

                   2. .

                      Prosessi sisältää kaikkien oletusluettelotyyppisten ominaisuusarvojen poistamisen ja taustakuvan ja marginaalien lisäämisen elementtiin

                   3. .

                      Lisätietoja – listatyylityyppisen ominaisuuden asettaminen arvoon none poistaa olemassa olevat luettelomerkit. Taustaominaisuus asettaa taustakuvan ja sen sijainnin ja toistaa tarvittaessa. Ja täyteominaisuus antaa tilaa taustakuvalle tekstin vasemmalle puolelle.

                      • Oranssi
                      • Vihreä
                      • Sininen

                      Li ( tausta: url("arrow.png") 0 50 % ei toistoa; list-style-type: ei mitään; täyte-vasen: 12px; )

                      Kuvan näyttäminen merkintänä

                      listatyylinen sijaintiominaisuus

                      Oletusarvoisesti luettelomerkit sijoitetaan elementin sisällön vasemmalle puolelle

                   4. . Tätä sijoitustyyliä kuvataan ulkopuoliseksi, mikä tarkoittaa, että kaikki sisältö näkyy suoraan oikealla listamerkinnän ulkopuolella. List-style-position -ominaisuuden avulla voimme muuttaa ulkopuolen oletusarvon sisälle tai periytyä .

                      ulkopuolella sijoittaa luettelomerkin elementin vasemmalle puolelle

                   5. äläkä anna sisällön valua tämän merkin alapuolelle. Sisäinen arvo (jota käytetään harvoin ja näkyy) asettaa listamerkin elementin ensimmäiselle riville
                   6. ja antaa sisällön kiertyä merkin ympärille tarvittaessa.
                      • Kuppikakkuja...
                      • Kastelu...

                      Ul ( listatyylinen sijainti: sisällä; )

                      Luettelotyylisen sijainnin omaisuuden esittely

                      Yleinen kiinteistöluettelotyyli

                      Luettelon ominaisuudet, joista keskustelimme äskettäin, list-style-type ja list-style-position , voidaan yhdistää yhdeksi yleiseksi ominaisuudeksi, list-style . Tässä ominaisuudessa voimme käyttää yhtä tai kaikkia luettelon ominaisuusarvoja samanaikaisesti. Näiden arvojen järjestyksen tulee olla: list-style-type ja sen jälkeen list-style-position .

                      Ul ( listatyyli: ympyrä sisällä; ) ol ( listatyyli: alempi-roomalainen; )

                      Vaakasuuntainen luettelonäyttö

                      Joskus haluamme näyttää luettelot vaakasuunnassa pystysuoran sijasta. Haluamme ehkä jakaa luettelon useisiin sarakkeisiin navigointiluettelon muodostamiseksi tai sijoittaa useita luettelokohteita yhdelle riville. Riippuen sisällöstä ja halutusta ulkomuoto On olemassa useita tapoja näyttää luettelot yhtenä rivinä, esimerkiksi ottamalla elementtien näyttöominaisuuden arvot

                   7. kuten inline tai inline-block tai float-ominaisuuden kautta.

                      Luettelon näyttö

                      Suurin osa nopea tapa näyttää luettelon yhdellä rivillä - tämä on elementtien asettaminen

                   8. näyttöominaisuus, jonka arvo on inline tai inline-block . Tämä laittaa kaikki elementit
                   9. yhdelle riville tasavälein jokaisen luettelokohdan välillä.

                      Jos elementtien välit

                   10. aiheuttavat ongelmia, ne voidaan poistaa samoilla tekniikoilla, joita käsittelimme oppitunnissa 5, Sisällön sijoittaminen.

                       Käytämme paljon useammin inline-block-arvoa inline-arvon sijasta. Inline-block-arvon ansiosta elementteihin on helppo lisätä pystysuora pehmuste ja muuta tilaa

                   11. , kun taas rivin sisäinen arvo ei.

                       Kun näyttöominaisuuden arvoksi muutetaan inline tai inline-block , luettelomerkki, piste, numero tai muu, poistetaan.

                       • Oranssi
                       • Vihreä
                       • Sininen

                       Li (näyttö: inline-block; marginaali: 0 10px; )

                       Inline-block-luettelon esittely

                       Listat kelluvilla

                       Näyttöominaisuuden muuttaminen inline- tai inline-block-muotoon on nopeaa, mutta se poistaa luettelomerkit. Jos niitä tarvitaan, lisää kelluja jokaiseen elementtiin

                   12. on parempi vaihtoehto kuin näytön ominaisuuden muuttaminen.

                       Asennus kaikille elementeille

                   13. float-ominaisuudet, kuten vasen, kohdistavat kaikki elementit vaakasuoraan
                   14. suoraan vierekkäin ilman rakoja niiden välillä. Kun käytämme kelluketta
                   15. , luettelomerkki näytetään oletusarvoisesti ja sijoitetaan kohteen päälle
                   16. hänen vieressä. Estääksesi luettelomerkinnän näkymisen muiden kohteiden päällä
                   17. , vaakamarginaali tai pehmuste on lisättävä.
                       • Oranssi
                       • Vihreä
                       • Sininen

                       Li ( float: vasen; marginaali: 0 20px; )

                       Listan esittely kellulla

                       Kuten kaikki kelluvat elementit, tämä katkaisee sivun kulkua. Emme saa unohtaa tyhjentää float ja palauttaa sivu normaaliin virtaukseen - yleisin tapa on clearfix.

                       Esimerkki navigointiluettelosta

                       Suunnittelemme ja löydämme usein navigointivalikoita, joissa käytetään järjestämättömiä luetteloita. Nämä luettelot asetetaan yleensä vaakasuoraan käyttämällä jompaakumpaa aiemmin mainituista kahdesta menetelmästä. Tässä on esimerkiksi vaakasuuntainen navigointivalikko, joka on järjestetty järjestämättömällä luettelolla, jossa elementit

                   18. näytetään inline-lohkona .

                       Navigointi ul ( fontti: lihavoitu 11px "Helvetica Neue", Helvetica, Arial, sans-serif; marginaali: 0; täyttö: 0; tekstin muunnos: isot kirjaimet; ) .navigation li ( näyttö: inline-block; ) .navigation a ( tausta: #395870; tausta: lineaarinen gradientti (#49708f, #293f50); reunus oikea: 1px solid rgba(0, 0, 0, .3); väri: #fff; täyte: 12px 20px; tekstin koristelu: ei mitään; ) .navigation a:hover ( tausta: #314b60; box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3); ) .navigation li:first-child a ( reunuksen säde: 4px 0 0 4px; ) .navigation li:last-child a (reunusoikea: 0; reunuksen säde: 0 4px 4px 0; )

                       Navigointiluettelon esittely

                       Käytännössä

                       Nyt kun osaamme luoda luetteloita HTML- ja CSS-kielellä, katsotaanpa Styles Conference -sivustoamme ja katsotaan, missä voisimme käyttää listoja.

                       Nyt navigointivalikot elementeissä

                       Ja