Šta radi oznaka ul. Numerisane liste u HTML-u

02.04.2019 U kontaktu sa

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

Tip 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.

Pozdrav dragi čitaoci blog stranice. Danas, u okviru ovog naslova, želim da pričam o raznim Html listama koje se mogu kreirati na osnovu posebno dizajniranih oznaka UL, OL, LI i DL. Uz pomoć para UL i LI kreiraju se bulletirane liste, uz pomoć OL i LI - numerisane, a uz pomoć elemenata DL, DT i DD kreiraju se takozvane liste definicija. Također ćemo se ukratko osvrnuti na principe kreiranja ugniježđenih struktura.

Želim da vas podsjetim da smo već uspjeli, uspjeli razgovarati o osnovama modernog, kao i o rasporedu stola (). Osim toga, dotakli smo se osnova, pa, naučili smo kroz.

Označene liste zasnovane na UL i LI oznakama

UL oznaka se koristi za kreiranje lista sa nabrajanjem, a OL se koristi za kreiranje numerisanih lista. Ove oznake su uparene i blokirane, baš kao i LI element.

Odvojene stavke liste nalaze se između oznaka otvaranja i zatvaranja, koje su zauzvrat zatvorene u elementu LI otvaranja i zatvaranja. Na vrhu i dnu Html lista, pretraživač dodaje uvlačenje u jednom redu, slično uvlačenju napravljenom oznakom pasusa.

Pogledajmo, na primjer, varijantu s nabrajanjem koja bi mogla izgledati ovako:

Prva linija
Drugi
Poslednji element

Samo LI elementi mogu biti unutar otvaranja i zatvaranja UL tagova, a već unutar samih ovih elemenata (stavki) možete umetnuti bilo koji sadržaj (tekst, slike, naslove, pasuse, veze, pa čak i druge liste).

One. UL služi samo za organizovanje označenog (neuređenog) listinga, i svega što ćete vidjeti na njemu web stranica unutar njega, implementirano korištenjem sadržaja LI elemenata.

Za UL, možete promijeniti tip markera upisivanjem u njega različita značenja za atribut "Type". Ako "Type" (kontrola izgleda markera) nije navedena za UL element, tada će se prikazati podrazumevani tip markera (disk - krug popunjen bojom teksta):

U gornjim primjerima, napisali smo atribut "Type" u UL elementu, koristeći dati tip markeri za sve artikle. Ali atribut "Type" se može dodijeliti za svaku pojedinačnu LI oznaku postavljanjem vlastitog tipa markera za ovu stavku.

Primjer liste s grafičkim oznakama sa različite vrste marker za svaku stavku:

Marker u obliku popunjenog diska
Marker u obliku neobojenog diska
Square

Numerisane liste u HTML-u na osnovu OL oznake

Za kreiranje numerisane liste koriste se OL oznake unutar kojih će se, opet, nalaziti LI elementi. OL i LI, kao što sam već spomenuo, su blokovi (odnosno, imaju tendenciju da zauzmu sav raspoloživi prostor po širini) i unutar OL neće biti moguće smjestiti ništa osim LI elemenata.

Ispostavilo se da su OL i UL servisni tagovi koji su potrebni samo da bi pretraživaču rekli kakvu listu generišemo (označene ili numerisane). U slučaju numerisanog, lijevo od svake stavke nećemo vidjeti marker, već broj i tačku iza njega:

Prva linija
Druga tačka
Treća linija

Kao što sam spomenuo gore, elementi UL, OL i LI imaju mogućnost korištenja atributa TYPE. Omogućava vam da prilagodite vrstu metka ili da odredite koji brojevi ili slova će biti numerisane stavke na listi. Za numerisanu listu, parametri ovog atributa mogu imati sledeće vrednosti:

velika slova

- mali rimski brojevi;

Primjer numerirane liste s različitim vrstama numeriranja za svaku stavku:

sa numeracijom velikim rimskim brojevima
Numeracija malim latiničnim slovima
Mali rimski brojevi

Prilikom kreiranja numerisanih lista, takođe je moguće započeti numerisanje ne od jednog, već od broja navedenog u START atributu. Na primjer:

Prvi element čiji je broj naveden u OL oznaci atributom start = "23".
Sljedeća stavka, s brojem jedan viši
Još jedan još jedan

Za OL, također možete započeti novo numeriranje od bilo koje vrijednosti, počevši od bilo koje stavke, pisanjem atributa VALUE sa potrebnim brojem u početnom LI ove stavke. Na primjer:

Prva stavka sa brojem jedan
Ovaj element će dobiti broj naveden u atributu value = "32".
Stavka sa velikim brojem

Stiliziranje lista u CSS-u (Style Sheets)

Ali obično sada izgled markeri se ne postavljaju preko atributa TYPE, već za koje su dodijeljena odgovarajuća svojstva.

Ovdje ću samo navesti primjer raznih oznaka za nenumerisane liste, čiji je izgled specificiran putem poseban fajl sa kaskadnim stilovima.

Prva tačka
Sekunda
Last

Ali o tome ćemo govoriti u narednim člancima. Ovako je postavljen izgled UL markera na ovom blogu. Slike se koriste kao markeri: za obične stavke nenumerirane liste -, za ugniježđene stavke nenumerirane liste -.

Posebne i ugniježđene liste u HTML kodu

Treći i posljednji tip se zove "definicijska lista" i specificira se pomoću tri taga - DL, DT i DD. DL govori pretraživaču da će slijediti lista definicija.

Obično se ova vrsta koristi (dobro, ili se pretpostavljalo da će biti korišćena) za pisanje rečničkih unosa, koji se sastoje od pojmova (zatvorenih u DT tagovima) i njihovih opisa (zatvorenih u DD tagovima).

Prvi mandat: Opis
Drugi mandat: Njegov opis

Ako pogledate gornji primjer, primijetit ćete da je element DD (opis termina) pomaknut (za 40 piksela) u odnosu na DT element (sam termin).

Generalno, DL, DT i DD su blok oznake, štaviše, unutar DT elementa možete samo umetnuti sadržaj inline oznake(ispada da unutar DT-a neće biti moguće koristiti blok elemente naslova i pasusa). A unutar DD tagova, možete umetnuti bilo koje elemente, i inline i blok.

Ugniježđena lista u HTML-u je kreiran analogno jednostavnom, ali unutar glavne liste, neke od stavki su ponovo zatvorene u UL ili OL tagove za otvaranje i zatvaranje.

Imajte na umu da se završni LI stavke u kojoj će se kreirati ugniježđena stavka postavlja samo nakon cijelog koda ugniježđene liste (ovo je vrlo važno za njen ispravan prikaz na web stranici). Ugniježđena lista može izgledati otprilike ovako:

Prvi pasus glavne numerisane
Druga tačka
- Prvi element ugniježđenog je označen s nabrajanjem
- Sekunda
- Treći i posljednji pasus je označen
Treća stavka je numerisana

Sretno ti! Vidimo se uskoro na stranicama blog stranice

možete pogledati više video zapisa ako odete na

");">

Možda ste zainteresovani

Kako umetnuti u HTML link i slika (fotografija) - IMG oznake i A
Html forme za sajt - oznake Forma, Input i Select, Option, Textarea, Label i drugi za kreiranje elemenata web obrazaca Odaberite, Option, Textarea, Label, Fieldset, Legend - Html oznake padajućeg obrasca i tekstualni okvir
Kako se boje postavljaju u Html i CSS kodu, odabir RGB nijansi u tabelama, Yandex i drugi programi
Ugradi i objekt - Html oznake za prikaz medijskog sadržaja (video, flash, audio) na web stranicama
H1-H6 oznake i atributi naslova, horizontalna linija Hr, prijelom reda Br i paragraf P prema Html 4.01 standardu
Tabele u HTML-u - Tabela, Tr i Td oznake, kao i Colspan, Cellpadding, Cellspacing i Rowspan za njihovo kreiranje

Dobar dan!

U ovom ćete članku naučiti o svim mogućnostima lista, razumjeti kako napraviti numerisanu 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 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 pratit će se 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:

Rice. 1.1. Standardni prikaz neuređene HTML liste u pretraživaču

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 atribut tipa i dao ga našoj listi sa nabrajanjem:

<html> <glava> <naslov> Primjer liste s nabrajanjem s praznim markerom u krugu</ naslov> </ glava> <tijelo> zvijezde: <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:

Rice. 1.2. Bullet prikaz za listu u obliku kruga 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 kvadratni:

Rice. 1.3. Marker za okvir sa listom kao kvadrat u pretraživaču

Važna napomena: ovo se više ne koristi za stiliziranje lista sa nabrajanjem. Postoji jasna podjela 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:

Rice. 1.4. Greška na validatoru kada se koristi atribut "type" liste

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. Numerisana 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:

Rice. 2.1. Numerisana lista u pretraživaču sa standardnim postavkama

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 Uličica bijesa 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 numeriranje 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:

Rice. 2.2. Numeracija od proizvoljan broj u numerisanoj listi

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, napravit ć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 lista na više nivoa izgleda u pretraživaču:

Rice. 3.1. Primjer višeslojne liste u HTML-u

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

Ali možemo kombinovati slojevite 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, stavili smo 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 je potrebno 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

Dovoljna je samo jedna nekretnina CSS slika-stil liste... 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 je potrebno 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 pogledati sav rad sa njim HTML liste na praksi:

standardne liste

standardni pogled

Na osnovu osnova, sada ćemo detaljnije pogledati elemente koji se koriste za pružanje strukture i značenja različitim dijelovima dizajn. Ako neko ne zna, onda ul i li, ovo je mnogo najbolji način nego jednostavno tekstualni tekst jer kada je tekst umotan, posebno u mobilni telefon, savršeno se uvlači i ne omotava se oko markera.

Vjeruje se da liste jesu odličan način predstavljanje informacija na stranicama jer se lako čitaju i izgledaju dobro. Čini se da mnogi ljudi misle da su bullet point male slike, ali u stvarnosti se sve više stvaraju jednostavan HTML kod. Možete umetnuti različite vrste liste jedna u drugu, ako želite, samo zapamtite da ih pravilno zatvorite. Možete se igrati sa tekstom koji želite u svim ovim komandama liste.

Također morate znati da liste u početku sadrže nekoliko elemenata:

1 ... Neuređene informacije.
2 ... Naručene informacije.
3 ... Definicije.

Početak instalacije:

1. Opcija:

Stavka liste

Jedinstvena lista

Original Lists

ZORNET.RU - Za webmastere

Druga lista

Ksangelopan (
margina: 19px 0 0;
padding: 0;
stil liste: nijedan;
poništavanje brojača: li;
}
.ksangelopan li (
granica: 2px čvrsta # 3575ad;
pozadina: # d7dee4;
položaj: relativan;
margin-bottom: 17px;
padding: 15px 9px;
}
.ksangelopan li: lebdjeti (
z-indeks: 1;
}
.ksangelopan li: prije (
granica: 2px čvrsta # 2270b3;
pozicija: apsolutna;
vrh: -14px;
padding: 3px 9px;
veličina fonta: 11px;
font-weight: bold;
boja: # 246eaf;
pozadina: # f2f4f7;
kontrainkrement: li;
sadržaj: brojač (li);
-webkit-transition-duration: 0.4s;
tranzicija-trajanje: 0.4s;
}
.ksangelopan li: lebdjeti: prije (
pozadina: # 2672b3;
boja: # f7f9fb;
-webkit-transform: prevesti (-11px, 0);
-ms-transform: prevesti (-11px, 0);
-o-transform: prevesti (-11px, 0);
transform: translate (-11px, 0);
}
.ksangelopan li: poslije (
sadržaj: "";
pozicija: apsolutna;
trajanje tranzicije: 0.3s;
-webkit-transition-property: širina;
svojstvo prijelaza: širina;
z-indeks: -1;
pozadina: #FFF;
visina: 100%;
lijevo: 0;
vrh: 0;
širina: 0;
}
.ksangelopan li: lebdjeti: nakon (
širina: 100%;
}

2 Druga opcija:

Stavka liste

Jedinstvena lista

Original Lists

ZORNET.RU - Za webmastere

Druga lista

Beleduzlopamges (
margin-bottom: 8px;
padding: 0;
stil liste: nijedan;
poništavanje brojača: li;
}
.beleduzlopamges li (
položaj: relativan;
granica: 2px čvrsta # 195588;
pozadina: # eff3f7;
padding: 15px 19px 15px 27px;
margina: 12px 0 12px 40px;
-webkit-transition-duration: 0.3s;
trajanje tranzicije: 0.3s;
}
.beleduzlopamges li: lebdjeti (
pozadina: #FFF;
}
.beleduzlopamges li: prije (
visina linije: 32px;
pozicija: apsolutna;
vrh: 4px;
lijevo: -39px;
širina: 39px;
text-align: centar;
veličina fonta: 16px;
font-weight: bold;
boja: # f9f5f5;
pozadina: # 275b88;
kontrainkrement: li;
sadržaj: brojač (li);
tranzicija-trajanje: 0.2s;
}
.beleduzlopamges li: lebdjeti: prije (
širina: 46px;
}
.beleduzlopamges li: nakon (
pozicija: apsolutna;
lijevo: 0;
vrh: 4px;
sadržaj: "";
visina: 0;
širina: 0;
ivica: 16px čvrsta prozirna;
border-left-color: # 275b88;
-webkit-transition-duration: 0.2s;
tranzicija-trajanje: 0.2s;
}
.beleduzlopamges li: hover: nakon (
margin-left: 6px;
}

3 Treća opcija:

Skripte za uCoz

Šabloni za uCoz

Dizajn web stranice

Stilovi za sajt

CSS stil

Nizualisanelag (
padding: 0;
stil liste: nijedan;
poništavanje brojača: li;
}
.nizualisanelag li (
položaj: relativan;
padding: 9px 17px 17px 25px;
margin-left: 39px;
tranzicija-trajanje: 0.2s;
kursor: pokazivač;
font-weight: bold;
boja: # 343638;
}
.nizualisanelag li: prije (
ivica: 3px čvrsta prozirna;
visina linije: 35px;
pozicija: apsolutna;
vrh: 0;
lijevo: -29px;
širina: 41px;
text-align: centar;
veličina fonta: 14px;
font-weight: bold;
boja: # 619dce;
kontrainkrement: li;
sadržaj: brojač (li);
trajanje tranzicije: 0.3s;

box-size: border-box;
}
.nizualisanelag li: lebdjeti: prije (
boja: # 337AB7;
}
.nizualisanelag li: nakon (
pozicija: apsolutna;
vrh: 0;
lijevo: -29px;
širina: 41px;
visina: 41px;
granica: 5px čvrsta # 468bd0;
radijus granice: 50%;
sadržaj: "";
neprozirnost: 0,5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-size: border-box;
}
.nizualisanelag li: lebdjeti: nakon (
animacija: 500ms ease-in-out 0s bounceIn;
neprozirnost: 1;
}

@keyframes bounceIn (
0% {
neprozirnost: 0;
transformacija: scale3d (.3, .3, .3);
}
20% {
transformacija: scale3d (1.3, 1.3, 1.3);
}
40% {
transformacija: scale3d (.9, .9, .9);
}
60% {
neprozirnost: 1;
transformacija: scale3d (1.03, 1.03, 1.03);
}
80% {
transformacija: scale3d (.97, .97, .97);
}
do (
neprozirnost: 1;
transformacija: scale3d (1, 1, 1);
}
}

predivna animacija

4 Četvrta opcija:

Prvi element za sajt

Drugi element za sajt

Treći element za sajt

Četvrti element za sajt

Peti element za sajt

Padding: 0;
stil liste: nijedan;
}
.kudezamuden li (
padding: 6px;
}
.kudezamuden li: prije (
padding-right: 11px;
font-weight: bold;
boja: # 4979a0;
sadržaj: "\ 2606";
tranzicija-trajanje: 0.4s;
}
.kudezamuden li: lebdjeti: prije (
boja: # 235e90;
sadržaj: "\ 2605";
}

prethodne verzije

U principu jeste mali izbor liste, će dati webmasteru da napravi prekrasnu listu na portalu, gdje je on sam može urediti više, kako želi da je vidi.

Ako treba da stavite stavke u numerisanu listu umesto u listu sa nabrajanjem, onda će se ovde koristiti uređeni HTML. Ova lista je kreirana pomoću oznake ol. Numeracija počinje od jedan i povećava se za jedan za svaku narednu stavku liste sa oznakom li.

HTML liste koriste se za grupisanje povezanih informacija. Postoje tri vrste lista:

bulleted list —

obeleženo markerom,
numerisana lista —
1. označeno brojem,
  lista definicija- - sastoji se od parova pojmova
  —
  definicija.
  Svaka lista je kontejner koji sadrži stavke liste ili parove termin-definicije. Stavke liste se ponašaju kao blok elementi, slažući se jedan ispod drugog i zauzimajući cijelu širinu bloka kontejnera. Svaka stavka liste ima dodatni okvir sa strane koji ne učestvuje u izgledu.
  
  Generisanje HTML lista
  
  1. Označena lista
  
  Označena lista je neuređena lista (sa engleske nesređene liste)... Created with uparena oznaka
  ... Marker stavke liste je oznaka, na primjer, popunjeni krug.
  Preglednici prema zadanim postavkama dodaju sljedeće formatiranje u okvir sa listom:
  Svaka stavka liste kreira se pomoću oznake para
2. (sa engleske stavke liste).
- Microsoft
- Google
- Apple
Rice. 1. Označena lista
2. Numerisana lista

Numerisana lista se kreira pomoću uparene oznake. Svaka stavka liste se također kreira pomoću elementa
... Pretraživač automatski numeriše elemente po redosledu, a ako izbrišete jedan ili više elemenata takve liste, onda će se ostali brojevi automatski ponovo izračunati.
Okvir sa listom takođe ima podrazumevane stilove pretraživača:
dostupan je atribut value, koji vam omogućava da promijenite zadani broj za odabranu stavku liste. Na primjer, ako za prvu stavku na listi koju postavite

, tada će se ostatak numeracije ponovo izračunati u odnosu na novu vrijednost.

Za oznaku

Atribut	Opis, prihvaćena vrijednost
obrnuto	Obrnuti atribut specificira prikaz liste u obrnutim redosledom(na primjer, 9, 8, 7 ...).
start	Atribut start specificira početna vrijednost, od kojeg će početi numeriranje, na primjer, konstrukcija prva stavka će se dodijeliti serijski broj"10". Istodobno možete postaviti i vrstu numeracije, npr. .
tip	Atribut type specificira vrstu markera koji će se koristiti na listi (kao slova ili brojevi). Prihvaćene vrijednosti: 1 - zadana vrijednost, decimalna numeracija. A - numerisanje liste u abecedni red, velika slova (A, B, C, D). a - numerisanje liste po abecednom redu, malim slovima (a, b, c, d). I - numeracija rimskim velikim brojevima (I, II, III, IV). i - numerisanje rimskim malim ciframa (i, ii, iii, iv).

Microsoft
Google
Apple

3. Lista definicija

Liste definicija kreiraju se pomoću oznake

Okvir sa listom definicija ima sljedeće zadane stilove pretraživača:

Za oznake

i

dostupan.

Direktor:: Petr Tochilin
Uloge:: Andrey Gaidulyan; Aleksej Gavrilov; Vitalij Gogunski; Marija Koževnikova

Rice. 3. Lista definicija

4. Ugniježđena lista

Često prilike jednostavne liste nije dovoljno, na primjer, kada kreirate sadržaj, ne možete bez ugniježđene stavke... Oznake za ugniježđenu listu bi bile sljedeće:

Stav 1.
Tačka 2.
- Podtačka 2.1.
- Podtačka 2.2.
  - Podtačka 2.2.1.
  - Podtačka 2.2.2.
- Podtačka 2.3.
Tačka 3.

Rice. 4. Ugniježđena lista

5. Višeslojna numerisana lista

Lista na više nivoa se koristi za prikaz stavki liste na različitim nivoima sa različitim uvlakama. Oznake za višeslojnu numerisanu listu bi bile sljedeće:

stav
stav
1. stav
2. stav
3. stav
  1. stav
  2. stav
  3. stav
4. stav
stav
stav

Ova zadana oznaka će kreirati novu numeraciju zasnovanu na jednom za svaku ugniježđenu listu. Da biste ugnijezdili numeraciju, trebate koristiti sljedeća svojstva:
reset brojača resetuje jedan ili više brojača, postavljajući vrednost za resetovanje;
counter-increment specificira vrijednost inkrementa brojača, tj. kojim korakom će svaka naredna stavka biti numerisana;
content - generisani sadržaj, u u ovom slučaju je odgovoran za prikaz broja ispred svake stavke na listi.

Ol (/ * uklonite standardnu numeraciju * / stil liste: nema; / * Identifikujte brojač i dajte mu ime li. Vrednost brojača nije navedena - podrazumevano je 0 * / poništavanje brojača: li;) li : before (/ * Definiramo element koji treba numerirati - li. Pseudoelement before specificira da će se sadržaj umetnut korištenjem svojstva sadržaja pojaviti prije stavki liste. Ovo je također vrijednost povećanja brojača (podrazumevano je 1). * / Inkrement brojača: li; / * Svojstvo sadržaja prikazuje broj brojača stavki liste () znači da je generirani tekst vrijednost svih brojača s tim imenom. Tačka u navodnicima dodaje tačku odvajanja između brojeva i tačku sa razmakom se dodaje ispred sadržaja svake stavke liste * / sadržaj: brojači (li, ".") ".";)
Rice. 5. Višeslojna numerisana lista