Konkretna lista. Označena lista

30.03.2019 Iron

Označena lista definira se dodavanjem malog markera, obično popunjenog kruga, ispred svake stavke liste. Sama lista se formira pomoću kontejnera

kao što je prikazano ispod.
- Prva tačka
- Druga tačka
- Treća tačka
Završna oznaka mora biti prisutna na listi.

inače će doći do greške. Kraj oznaka iako nije potrebno, savjetujemo vam da ga uvijek dodate kako biste jasno odvojili stavke na listi.

Primjer 11.1 pruža HTML za dodavanje liste s nabrajanjem na web stranicu.

Primjer 11.1. Napravite listu sa nabrajanjem

Označena lista

Cheburashka
Krokodil Gena
Shapoklyak
Rat Larissa

Rezultat ovaj primjer prikazano na sl. 11.1.

Rice. 11.1. Prikaz liste sa oznakama

Obratite pažnju na padding na vrhu, dnu i lijevo od liste. Takve uvlake se dodaju automatski.

Markeri mogu biti tri tipa: krug (podrazumevano), krug i kvadrat. Atribut tipa oznake koristi se za odabir stila markera.

Važeće vrijednosti

Vrsta liste	HTML kod	Primjer
Lista sa naznakama u obliku kruga		Prvo Sekunda Treće
Lista sa naznakama u obliku kruga		Prvo Sekunda Treće
Lista sa kvadratnim markerima		Prvo Sekunda Treće

Izgled markera može se neznatno razlikovati u različitim pretraživačima, kao i prilikom promjene fonta i veličine teksta.

Kreiranje liste sa kvadratnim markerima je prikazano u Primeru 11.2.

Primjer 11.2. Tip markera

Označena lista

Promjena uvjerenja

promjena vjerskih uvjerenja (opcionalno: budizam, konfucijanizam, hinduizam). Specijalna ponuda- Judaizam i islam zajedno;
promjena vjerovanja u nepogrešivost voljene strane;
vjerovanje da vanzemaljci postoje;
preferencija političkog sistema kao najboljeg svoje vrste (fakultativno: feudalizam, socijalizam, komunizam, kapitalizam).

Rezultat ovog primjera prikazan je na sl. 11.2.

Liste se aktivno koriste za automatsko numerisanje sadržajni blokovi. Međutim, kada koristite ugniježđene liste, ne možete dobiti numeraciju potklauzula kao što su 1.1, 1.2, 1.3, jer će svaka lista biti nezavisna. Ali ono što je nemoguće u STML-u može se dodijeliti stilovima.

Prvo, pogledajmo općenito kako kreirati ugniježđene liste. Glavni kontejner je oznaka

... Ugniježđena lista također počinje sa

, ovako se poštuje ispravna sintaksa (primjer 1).

Primjer 1. Normalna ugniježđena lista

Ugniježđena lista

Stav 1
1. Podtačka 1.1
2. Podtačka 1.2
3. Podtačka 1.3

Tačka 2
1. Podtačka 2.1
2. Podtačka 2.2

Rezultat ovog primjera prikazan je na sl. 1. Imajte na umu da numeriranje ugniježđenih lista svaki put počinje iznova.

Rice. 1. Prikaz ugniježđene liste

Sada uklonimo ugrađenu numeraciju lista i kreiramo je prema novom, ali u obliku koji nam je potreban. Ovo zahtijeva tri stilska atributa: poništavanje brojača, povećanje brojača i sadržaj.

counter-reset - postavlja neku varijablu koja će pohraniti vrijednost brojača;

kontrainkrement - povećava ili smanjuje vrijednost brojača za navedeni broj;

sadržaj - Štampa vrednost brojača kada se koristi argument brojača (varijable). Radi u sprezi sa pseudoelementima poslije ili prije.

Za listu prvog nivoa zvaćemo varijablu brojača list1, a za drugi nivo - list2. Tada će pokretanje brojača za liste biti kako slijedi.

OL (resetiranje brojača: lista1;) / * Lista prvog nivoa * /
OL OL (resetiranje brojača: lista2;) / * Lista drugog nivoa * /

V u ovom slučaju Selektori konteksta pomažu da se odvoji ugniježđena lista od vanjske. OL konstrukcija znači primijeniti stil samo na oznaku

Povećanje vrijednosti brojača se događa preko OL LI: prije selektora, kojem se dodaju atributi brojača i stil sadržaja. Atribut counter-increment sa vrijednošću list1 povećava ovaj brojač za jedan, a sadržaj: counter (list1) "." Ispisuje vrijednost brojača prije stavke liste. Ovi atributi rade u parovima, tako da ih morate omogućiti istovremeno.

OL LI: prije ( / * Lista prvog nivoa * /
kontrainkrement: lista1;
/ * Prikaži vrijednost kao 1., 2. * /
}
OL OL LI: prije ( / * Lista drugog nivoa * /
kontrainkrement: lista2; / * Povećajte vrijednost brojača * /
}

Za ugniježđenu listu ponovo koristimo sporne selektore (OL OL) i istovremeno koristimo izlaz brojača list1 i list2, u ovom slučaju ćemo dobiti numeraciju tipa koji nam je potreban.

Konačni kod je prikazan u primjeru 2.

Primjer 2. Ugniježđene liste sa automatskim numeriranjem

Ugniježđena lista

Paragraf
1. podparagraf
2. podparagraf
3. podparagraf

Paragraf
1. podparagraf
2. podparagraf

Rezultat ovog primjera prikazan je na sl. 2.

Rice. 2. Prikaz automatskog numerisanja liste u pretraživaču Opera

Komentar

Gornji primjer ne radi u pretraživaču Internet Explorer do verzije 7, uključujući, budući da ne podržava nijedno od gornjih svojstava stila.

Pošto Internet Explorer pretraživač ne podržava mnogo zanimljivih stilskih atributa, uobičajeno numerisanje u listama treba ostaviti netaknuto posebno za njega. Da biste to učinili, uklonite tip-stil liste: nema. Ali to će uticati i na druge pretraživače u kojima primjer radi ispravno, tako da ga morate primijeniti u haku - to je tehnika kada različitim pretraživačima dat je drugačiji kod stila. Na primjer, možete koristiti oznaku! Kada dodate! Važno za vrijednost atributa stila, njegova važnost se povećava. Ako redefinirate vrijednost istog atributa bez! Važno, pretraživači će ga ignorirati. Ali ne na Internetu Explorer verzija 6 i ispod.

LI (
tip-stil liste: nijedan! / * Uklanjamo numeraciju u pretraživačima Opera, Safari, Fire fox * /
tip-stil liste: decimalni; / * Ostavite numeraciju u IE6 pretraživaču i ispod * /
}

Zamjenom ovih kodova linijom LI selektora u primjeru 2, dobijamo ugniježđenu listu koja ispravno radi u svim pretraživačima.

Numerisane liste su kolekcija stavki sa svojim serijski brojevi... Tip i tip numeracije zavise od atributa oznake

kao što je prikazano ispod.

Prva tačka
Druga tačka
Treća tačka

Ako ne navedete nikakve dodatne atribute i samo napišite oznaku

Primjer 11.3. Napravite numerisanu listu

Numerisana lista

Rad sa vremenom

stvaranje tačnosti (nikada nećete zakasniti ni na šta);
oporavak od tačnosti (nikada nigdje ne žurite);
mijenja percepciju vremena i sati.

Rezultat ovog primjera prikazan je na sl. 11.3.

Rice. 11.3. Prikaz numerisane liste

Imajte na umu da numerisana lista takođe dodaje automatska uvlačenja na vrh, dno i levo od teksta.

Sljedeće vrijednosti se mogu koristiti kao elementi numeracije:

arapski brojevi (1, 2, 3, ...);
velika latinična slova (A, B, C, ...);
mala latinična slova (a, b, c, ...);
veliki rimski brojevi (I, II, III, ...);
mali rimski brojevi (i, ii, iii, ...).

Atribut tipa oznake koristi se za označavanje tipa numerisane liste.

moguće vrijednosti

Vrsta liste	HTML kod	Primjer
arapski brojevi		1. Cheburashka 2. Krokodil Gena 3. Shapoklyak
Velika slova latinica		A. Cheburashka B. Krokodil Gena C. Shapoklyak
Mala slova latinice		a. Cheburashka b. Krokodil Gena c. Shapoklyak
Veliki rimski brojevi		I. Cheburashka II. Krokodil Gena III. Shapoklyak
Rimski brojevi u mala slova		i. Cheburashka ii. Krokodil Gena iii. Shapoklyak

Da biste započeli listu na određenoj vrijednosti, koristite start atribut oznake

Primjer 11.4. Numeracija liste

Rimski brojevi

Kralj Magnum XLIV
Kralj Zigfrid XVI
Kralj Sigismund XXI
Kralj Husbrandt I

Rezultat ovog primjera prikazan je na sl. 11.4.

Rice. 11.4. Numerisana lista sa rimskim brojevima

V HTML jezik Postoje dvije vrste lista: numerirane i nenumerirane. Njihova kreacija je skoro ista. Čak se i oznake razlikuju za jedan znak. Također možete kreirati što može uključivati i numerirane i označene tačke.

Možete transformisati ove liste kako želite. Sve zavisi od vaše mašte. Prvo ćemo razmotriti standardne liste, isto kao u Word editor, a onda ćemo ih poboljšati i dizajnirati do neprepoznatljivosti.

Numerirana HTML lista

Redovni broj se može kreirati pomoću sljedećih oznaka:

Prva stavka na listi

Druga stavka na listi

Treća stavka na listi

Jednostavne liste izgledaju ovako

Prema standardima, svaka stavka liste treba da bude unutar tagova za otvaranje i zatvaranje li. Ali ako ne stavite završnu oznaku, onda će rezultat biti potpuno isti. Voditelj je prilično pametan. Kada konvertuje listu, analizira početne oznake. Ako vidi novu

, zatim automatski stavlja

Stoga se liste mogu napraviti kao što je prikazano u nastavku.

Ali sa stanovišta profesionalaca, ovo je netačno.

Nenumerirane (ili bullet) liste se kreiraju na isti način, osim što umjesto oznake ol pišete ul.

Nema brojeva ili slova - samo razni simboli koji se nazivaju markeri.

HTML višeslojna numerirana lista

Mnogi korisnici su zainteresovani za ovu mogućnost. Stoga, treba napomenuti da svaka HTML numerirana lista može biti višerazinska. Dodatni nivoi mogu biti isti ili označeni.

Da biste kreirali listu prikazanu u gornjem primjeru, trebate napisati sljedeće.

Imajte na umu da je u ovom kodu, za razliku od prvih primjera, dodan atribut tipa. Zahvaljujući njemu, možete odrediti vrstu sortiranja i za numerirane i za bullet liste.

Za numerisane označite abecedu ili vrstu brojeva, a za ostale slučajeve - vrstu markera.

Ako koristite posebna HTML oznaka, numerisana lista može postati šta god želite.

Možete specificirati atribut tipa sa bilo kojom vrijednošću iz tablice. Ili u klasi stila css navedite tip-stil liste sa željenim tipom sortiranja.

Prevođenje značenja je prilično jednostavno. Dosta osnovno znanje engleskog jezika... Ali čak i ako ne možete prevesti riječi "krug", "kvadrat" itd., možete vizualno razumjeti kakav će biti rezultat kada navedete ove vrijednosti u atributu tipa.

Za numerisane liste koristite sledeće opcije:

1 - arapski brojevi;
A - velika slova;
a - mala latinična slova;
I - veliki rimski brojevi;
i - mali rimski brojevi.

Podrazumevano je uvek lista sa. To jest, ako ništa niste naveli, to je ekvivalentno tipu = "1".

Pored toga, možete započeti numerisane liste sa bilo koje pozicije koju želite. Podrazumevano - izlaz od 1. Ali ako želite, možete početi sa najmanje sto. Da biste to učinili, morate navesti start atribut s bilo kojom vrijednošću.

Osim toga, možemo zaključiti u obrnutim redosledom... Da biste to učinili, morate pisati obrnuto.

Dizajn liste

Numerisana HTML lista može biti dizajnirana tako lepo da nije moguće odmah pretpostaviti da jeste redovna lista, a ne slika snimljena u Photoshopu.

Evo nekoliko primjera prekrasnih lista.

Kao što možete vidjeti iz primjera, možete promijeniti izgled numeraciju i same elemente.

Možete kreirati redovnu listu poput ove.

U css stilovima morate odrediti stil za ol oznake. Imajte na umu da će u ovom slučaju postavke biti primijenjene na sve liste na cijelom web mjestu gdje se koristi ovaj stilski fajl.

Razmotrimo prvo opciju s dizajnom okrugle liste. Vratite se na šifru liste. Tamo je navedena zaokružena lista klasa. Sa ovom klasom morate se popetljati da biste napravili takvu ljepotu. Klasu možete imenovati kako god želite.

Sada pogledajmo kvadratni dizajn.

Stilovi su prilično slični. Razlika je u tome što se u prvom slučaju element zaokružuje pomoću css mogućnosti.

Profesionalni dizajner izgleda mora predvidjeti i razumjeti da ne koriste svi korisnici savremenih kompjutera... Nemaju svi instalirani Windows 7, 8, 10. Postoji postotak korisnika koji još uvijek koriste Windows XP i koriste starije verzije. Internet pretraživač Explorer.

U pravilu, gotovo sva moderna poboljšanja dizajna elemenata nisu podržana njima. Korisnik će osjetiti da se na dizajnu web stranice uopće nije radilo. Da se sve iselilo. Elementi se sudaraju jedan sa drugim. Da biste to izbjegli, morate izračunati sve opcije.

Neki webmasteri zatvaraju oči pred njima, jer njihov udio u moderno tržište postaje sve manji i manji. Ali za profesionalca, svaki posjetitelj je važan, posebno ako se radi o komercijalnom mjestu.

Uradite nešto prikladno za svakoga ili razmotrite sve opcije pretraživača.

Dobar dan!

U ovom ćete članku naučiti o svim mogućnostima lista, razumjeti kako napraviti numeriranu listu, savladati oznake koje će pomoći da jednostavna lista s nabrajanjem bude zanimljivija i uočljivija s proizvoljnim oznakama. Nakon završetka lekcije, imat ćete razumijevanje o tome gdje se koriste liste i pod kojim okolnostima se mogu koristiti.

Ovaj članak je treći u ovom kratkom kursu o HTML osnove... Prije čitanja ovu lekciju Preporučujem da prođete kroz prethodna dva:

Članak je tek počeo, a možda ćete već primijetiti upotrebu standardne liste s nabrajanjem. Na mojoj web stranici to izgleda prilično jednostavno: na lijevoj strani je mala uvlaka s linijom i kvadratnim markerom. Dalje u članku ćemo detaljnije pogledati šta su markeri, kako napraviti brojeve, a takođe i kako napraviti svoj marker.

U svakom dijelu članka, kreiranje određenih lista će biti popraćeno detaljnim objašnjenjima za umetanje određene liste.

1. Liste sa nabrajanjem u HTML-u

Ova vrsta lista se koristi za nabrajanje skupa elemenata sličnih po značenju u tekstu. Ovo može biti lista linkova koji se odnose na istu temu, detaljno objašnjenje za odvojeni dijelovi tekst. Ali hajde da vidimo kako liste sa nabrajanjem izgledaju u kodu:

A ovako to izgleda u pretraživaču:

Standardni pogled

1.1 Standardne oznake za nabrajane liste

Na gornjoj slici (slika 1.1.), možete vidjeti krugove na početku svake stavke menija. Ovo je marker. Podrazumevano, to je popunjen krug u pretraživaču. U HTML-u postoji nekoliko tipova markera: popunjeni krug, prazan krug i kvadrat. Ne zahtijevaju CSS ili slike treće strane:

1.2 Popis markera kao prazan krug

Znate vrijednosti atributa, ali sada da vidimo kako napraviti HTML listu sa nabrajanjem u kodu. Iz gornje tabele odabrali smo drugu vrijednost "krug" za type atribut i dao ga našoj listi sa nabrajanjem:

<html> <glava> <naslov> Primjer liste s nabrajanjem s praznim markerom kruga</ naslov> </ glava> <tijelo> zvjezdice: <ul type = "krug"> <li> Sirius</ li> <li> Arcturus</ li> <li> Pollux</ li> <li> Betelgeuse</ li> <li> Sunce</ li> </ ul> </ tijelo> </ html>

Pogledajmo kako će ovaj kod izgledati u pretraživaču:

1.3 Marker liste u obliku kvadrata

Pogledajmo i posljednji primjer sa kvadratnim naznakom za HTML listu:

Obratite pažnju na marker, postao je kvadratan:

Važna napomena: ovo se više ne koristi za stiliziranje lista sa nabrajanjem. Postoji jasna podela CSS (pročitajte šta je CSS) i HTML. HTML je za označavanje, a CSS je za dobar izgled.

Kod koji sadrži dati atribut, prilikom navođenja tipa aktuelni dokument kao HTML5 (""), daće grešku tokom validacije. Ako niste čuli šta je validacija, idite ovde -.

Greška će biti sljedeća:

Shvatili smo liste s naznakama. Sada pređimo na numerisane liste, a zatim razmotrimo ugniježđene liste i nekoliko gotovi primjeri koji se najčešće koriste na pravim sajtovima.

2. Numerisane liste u HTML-u

Za razliku od prethodne vrste lista, numerisane liste imaju jednu važna karakteristika: oni automatski broje. Ovo je korisno kada je potrebno izvršiti numerisanje. velika lista... Ručno će to trajati jako dugo, a još uvijek se možete izgubiti. Brojčana lista je specificirana pomoću oznake. Kako to izgleda u praksi:

Primjer numerirane liste:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<html> <glava> <naslov> Primjer standardne numerisane liste</ naslov> </ glava> <tijelo> jedan do pet: <ol> <li> Prvo</ li> <li> Sekunda</ li> <li> Treće</ li> <li>Četvrto</ li> <li> Peto</ li> </ ol> </ tijelo> </ html>

Ovako izgleda numerisana lista sa standardne postavke u pretraživaču:

Kao i njegov prethodnik (nabrajana lista), ima svoje stilove za prikazivanje brojeva. Obična numeracija nije jedina vrsta nabrajanja za numerisanu listu u HTML-u.

2.1 Standardne oznake za numerisanu listu

Ovdje imamo izbor ne između tri vrste markera, već od pet:

Ime markera	Vrijednost atributa "type".	Primjer liste
Oznake arapskih brojeva	1	Badminton Bejzbol
Oznake malim slovima latinična slova	a	Chomolungma Chogori Kanchenjunga
Markeri u obliku velikih latiničnih slova	A	Summit strmoglavi Tantrum alley Insano
Oznake za male rimske brojeve	i	Filipinsko more Arabian Sea Koraljno more
Veliki rimski brojevi	I	Crveni Zeleno Plava

2.2 Prilagođeno numerisanje u HTML listi

Pored uobičajenog izlaza numerisane liste, takođe možemo započeti naše numerisanje od bilo koje cifre. Da biste to učinili, morate postaviti dodatni atribut "start". Ovo numerisanje radi za sve tipove oznaka za numerisane liste. Kako to izgleda u praksi:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<html> <glava> <naslov> Nasumično numerisanje za numerisanu listu</ naslov> </ glava> <tijelo> Počinjemo numerisati od dvanaest: <ol type = "a" start = "12"> <li> Dvanaest</ li> <li> Trinaest</ li> <li>Četrnaest</ li> <li> Petnaest</ li> <li>Šesnaest</ li> </ ol> </ tijelo> </ html>

Ovako će se prikazati na web stranici uživo:

proizvoljan broj

Na gornjoj slici smo numerisali listu počevši od dvanaest, dok smo markere napravili u obliku malih latiničnih slova. Sada je, mislim, postalo jasno kako koristiti ove atribute u svojim projektima.

Za sada, pređimo na ugniježđene HTML liste.

3. Kako napraviti višeslojnu (ugniježđenu) listu u HTML-u

Liste na više nivoa se koriste na sajtu u izgradnji menija. Ovaj meni najčešće izgleda kao padajući meni (lekcija na), ili padajući meni levo ili desno. Takvi meniji vam omogućavaju da pohranite druge stavke menija u kompaktnom obliku.

Koristeći modele automobila kao primjer, napravićemo listu na više nivoa u HTML-u:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<html> <glava> <naslov> HTML ugniježđena lista sa nabrajanjem</ naslov> </ glava> <tijelo> <ul> <li> Citroen<ul> <li> Berlingo</ li> <li> C1</ li> <li> C2</ li> <li> C3 Picasso</ li> <li> C4 Grand Picasso</ li> </ ul> </ li> <li> KIA</ li> <li> Toyota</ li> <li> Audi</ li> <li> Lexus</ li> </ ul> </ tijelo> </ html>

Obratite pažnju kako izgleda višeslojna lista u pretraživaču:

Napravili smo listu na više nivoa koristeći oznaku (tag

Ali možemo kombinovati višeslojne liste sa numerisanim i označenim kako slijedi:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<html> <glava> <naslov> Numerisane, označene i numerisane liste u HTML-u</ naslov> </ glava> <tijelo> <ul> <li> Prva grupa tulipana<ol> <li> Prvi razred<ul> <li> Jednostavni rani tulipani</ li> </ ul> </ li> <li> Druga klasa<ul> <li> Dupli tulipani</ li> </ ul> </ li> </ ol> </ li> </ ul> </ tijelo> </ html>

U gornjem primjeru imamo dvostruko ugniježđenje (2 nivoa). Prvo, stavljamo listu od dvije klase tulipana, imamo je numerisanu. Zatim, lista sa nabrajanjem je ugniježđena u svaku od stavki u numerisanoj listi.

Gledamo njegov izgled u pretraživaču:

4. Korisni resursi za HTML liste

Sadrži informacije koje zahtijevaju razumijevanje CSS svojstava. Da biste to učinili, preporučujem vam da proučite sljedeće lekcije:. Svi primjeri će biti odmah sa izvorni kod i raščlanjeni su na kartice HTML (struktura), CSS (stilovi) i Rezultat (rezultat).

4.1 Kako napraviti HTML listu u string

Pretvaranje HTML liste u string može biti potrebno prilikom kreiranja horizontalni meni... Vrlo je jednostavno napraviti:

4.2 Kako napraviti HTML listu bez ikone

Odgovoran za ovo svojstvo tipa-stil liste u CSS-u (više detalja):

4.3 Kako napraviti listu u HTML centru

Stavka liste je blok element tako da ga treba centrirati margine... Ali postoji jedan važna tačka- moramo eksplicitno specificirati širinu da bi poravnanje funkcioniralo:

4.4 Kako napraviti listu u HTML-u sa slikama

Dovoljno je samo jedno CSS svojstvo lista-stil-slika. Unutar URL-a navedite adresu prije ikone. Želim samo napomenuti da je bolje odmah odabrati malu sliku, jer visina linije liste ovisi o tome:

4.5 HTML označite svoj marker

U tom slučaju potrebno je unaprijed povezati ikone fonta (na primjer, FontAwesome). Tada možete napraviti bilo koju ikonu umjesto standardnog markera:

4.6 Kako napraviti listu u HTML-u sa više kolona

Za izradu liste sa više kolona koristićemo CSS svojstvo column-count (ovo svojstvo je podržano samo u sljedećim pretraživačima: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Također morate postaviti visinu za listu kako biste vidjeli podjelu na više kolona:

5. Praksa rada sa listama

U videu ispod možete vidjeti sav rad sa HTML listama u praksi: