Jedina razlika je u tome što je ova oznaka striktno napravljena za liste numeriranja. Naziv oznake dolazi od engleske skraćenice "Ordered List" - numerisana lista.
Sintaksa oznake
- Stavka #1
- Stavka #2
- Stavka #3
- ...
Gdje atribut type = "value" može uzeti sljedeće vrijednosti
- A - postavlja markere u obliku velikih latiničnih slova (A, B, C ..);
- a - postavlja markere u obliku malih latiničnih slova (a, b, c ..);
- I - postavlja markere u obliku velikih rimskih brojeva (I, II, III, IV ..);
- i - specificira markere u obliku malih rimskih brojeva (i, ii, iii, iv ..);
- 1 (podrazumevano) - specificira markere u obliku arapskih brojeva (1, 2, 3 ..);
Atribut start = "value" postavlja početnu vrijednost (početnu vrijednost) izvještaja.
Obrnuti atribut specificira obrnuti broj (ako je potrebno).
Tag
- zahtijeva obaveznu upotrebu završne oznake
Upareni tag se koristi za formiranje stavki liste
Bilješka
Unutar liste možete promijeniti račun u svoj. Za ovo postoji posebna vrijednost atributa = "" za oznaku
- Stavka #1
- Stavka #2
- Stavka #3
Primjeri sa numerisanim listama u html-u ( )
Primjer 1. Numerirana html lista u obliku latiničnih slova
Primjer sa velikim slovima
- Stavka #1
- Stavka #2
- Stavka #3
- Stavka #1
- Stavka #2
- Stavka #3
Primjer sa malim slovima
- Stavka br. 10
- Stavka #11
- Stavka #12
Ovako to izgleda na stranici:
- Stavka #1
- Stavka #2
- Stavka #3
Primjer 2. Numerirana html lista latiničnim slovima
Primjer sa velikim slovima
- Stavka #1
- Stavka #2
- Stavka #3
Ovako to izgleda na stranici:
- Stavka #1
- Stavka #2
- Stavka #3
Primjer sa malim slovima
- Stavka #1
- Stavka #2
- Stavka #3
Ovako to izgleda na stranici:
- Stavka #1
- Stavka #2
- Stavka #3
Primjer 3. Numerisana html lista različitih početnih pozicija
Primjer koji pokazuje mogućnosti start atributa, koji vam omogućava da postavite početnu vrijednost brojača.
- Stavka #1
- Stavka #2
- Stavka #3
Ovako to izgleda na stranici:
- Stavka #1
- Stavka #2
- Stavka #3
Primjer 4. Promjena naloga u numerisanim html listama
Ispod je primjer s mogućnošću promjene vrijednosti brojača pomoću atributa value kada se prikazuju novi elementi u oznakama
- Stavka #1
- Stavka #2
- Stavka #3
- Stavka #4
Ovako to izgleda na stranici:
- Stavka #1
- Stavka #2
- Stavka #3
- Stavka #4
Primjer 5. Reverzibilna numerirana lista u html-u
Ispod je primjer obrnute numerirane liste (brojeći obrnutim redoslijedom).
- Stavka #1
- Stavka #2
- Stavka #3
- Stavka #4
Ovako to izgleda na stranici:
- Stavka #1
- Stavka #2
- Stavka #3
- Stavka #4
Zadatak
Prikažite listu sa nabrajanjem horizontalno bez znakova za nabrajanje.
Rješenje
Oznaka liste za nabrajanje
- po defaultu izlazi stavke
- vertikalno jedan iznad drugog. Za kreiranje navigacijskih elemenata, u nekim je slučajevima zgodno prikazati listu horizontalno. Postoji nekoliko načina da dobijete ovaj prikaz liste.
Već biste trebali biti svjesni da HTML sadrži blok i inline elemente. Inline elementi ne kreiraju vlastite blokove, primjeri takvih elemenata su oznake ili ... Blok elementi se prikazuju u novom redu i stvaraju pravokutni blok, primjer takvih oznaka
iliDakle, oznaka
- je također blok element.
To tag
- ne ponaša se kao blok element, možete koristiti CSS da ga napravite inline.
CSS svojstvo prikaza odgovorno je za to kako će element biti prikazan u dokumentu. Razmotrimo tri njegove vrijednosti (iako ih ima više):
- blok - element se prikazuje kao blok.
- inline - element se prikazuje kao inline.
- inline-block - blok-inline element, pročitajte više o ovoj vrsti elementa u nastavku, mi ćemo ga koristiti.
Prvo, napravimo horizontalnu listu pretvaranjem njenih stavki u inline elemente. U CSS stilu ćemo napisati pravilo u kojem je svojstvo prikaza postavljeno na li selektor sa vrijednošću umetnutom.
Listajte horizontalno Dakle, ovaj stil je funkcionisao i postavio stavke liste horizontalno:
Slika 1. Rad primjera #1.
Ova metoda ima nedostatke. To je zato što inline elementi imaju neka ograničenja u odnosu na blok elemente. Na primjer, ne mogu im se dati širina i visina, ali blokovi mogu.
Na primjer, želimo da element menija koji kreiramo ima širinu od 150px i visinu od 40px. Pokušajmo promijeniti stil na sljedeći, odnosno dodati dva pravila koja postavljaju veličinu stavke menija:
Ove izmjene neće rezultirati promjenama. Da bi stavke menija bile horizontalno pozicionirane i da bi se mogle podesiti njihova širina i visina, potrebno ih je postaviti na inline-block tip. Promijenimo kod našeg primjera:
Listajte horizontalno Ovaj kod radi i promjene su vidljive:
Slika 2. Rad primjera #2. Ali mogu postojati različite opcije, na primjer, moramo prikazati ugniježđene liste u meniju:
Ugniježđena lista. Evo izlaza ovog koda:
Slika 3. Rad primjera №3. Vidimo da blokovi nisu poravnati po visini onako kako bismo željeli. Naravno, možete odrediti istu visinu za sve blokove, ali ne znamo uvijek njenu tačnu vrijednost unaprijed i može se promijeniti.
Ali zapravo, zašto se to dešava?
Naši blokovi imaju svojstvo prikaza postavljeno na inline-block. To znači da imaju kvalitete i blok elemenata (mogućnost specificiranja širine i visine) i inline elemenata. Ono što vidimo je kvalitet inline elemenata.
Pogledajmo niz sa "A" znakovima različitih veličina:
A A A A A A A
Vidimo da su sva slova okomito poravnata sa donjom linijom. Tačnije, duž osnovne linije, ali sada nećemo ulaziti u džunglu. Dakle, ista stvar se desila i sa našim blokovima.
Svojstvo vertical-align se koristi za vertikalno poravnavanje teksta. U našem primjeru #3, želimo koristiti vrijednost top, koja će poravnati gornju ivicu elementa s vrhom najvišeg elementa u redu.
Za sada, primijenimo ga na niz sa znakovima "A" različitih veličina:
A A A A A A A
Čini se da slova malo "skaču". Postavio sam CSS granicu na najviše slovo tako da vidite da zapravo nema skoka, postoji prazan prostor između gornje ivice (duž koje se vrši poravnavanje) i gornje tačke "A" znaka.
Svojstvo vertical-align mora se primijeniti na svaki inline element, ono se ne nasljeđuje. Možete pročitati više o ovoj osobini: vertical-align.
Nakon ove digresije nastavit ćemo s rasporedom stavki liste horizontalno.
Drugi način
Stavke liste možete postaviti horizontalno koristeći svojstvo float. Ovo svojstvo pokazuje na kojoj strani je element poravnat, ima dvije pozicije: lijevo i desno.
Evo primjera korištenja ovog koda:
Listajte horizontalno Evo izlaza koda:
Slika 4. Rad primjera. Čini se da primjer funkcionira. Ali postoji jedno upozorenje u korištenju ove imovine. Sada ćemo to pogledati. Na primjer, uzmimo kod u kojem postoje dvije horizontalne liste s različitim načinima horizontalnog rasporeda elemenata: display i float:
Listajte horizontalno Evo izlaza koda:
Slika 5. Rad primjera. U ovim primjerima, popis kontejnera
- imaju crveni okvir od 1 piksela. Ali gornja lista, koja koristi svojstvo prikaza, uključuje stavke liste. Ali elementi liste kreirane korišćenjem svojstva float ispadaju iz svog kontejnera.
- su još uvijek izvan kontejnera
-
.
- na mestu gde se sastaje
- , pretraživač automatski dodaje prelom reda;
- lista ima gornje i donje uvlake;
- markeri se podrazumevano prikazuju kao popunjeni krug;
- svaki element liste je pomeren udesno u odnosu na glavni tekst.
- disk - markeri u obliku popunjenog kruga;
- krug - markeri u obliku otvorenog kruga;
- kvadratni - kvadratni markeri.
- Sepulki
- Sepulcaria
- Sepulenie
- neće raditi, tako da morate zaobići to. Da biste to učinili, sakrijte markere liste koristeći svojstvo stila liste sa vrijednošću ništa i u tekstu prije sadržaja.
- dodajte naš vlastiti simbol koristeći :: prije pseudoelementa. U primjeru 2, trokut se koristi kao takav marker.
Primjer 2. Korištenje :: prije
Liste - Sepulki
- Sepulcaria
- Sepulenie
Rezultat ovog primjera prikazan je na sl. 2. Pošto korišćenje svojstva stila liste sa vrednošću none uopšte ne uklanja markere, već ih samo sakriva od pogleda, lista se pomera udesno. Da biste se riješili ove značajke, primjer dodaje negativno svojstvo uvlačenja teksta. Njegov zadatak je pomjeriti tekst ulijevo za jedan znak.
Rice. 2. Proizvoljni markeri u listi
Znak ne mora biti u heksadecimalnom formatu, može se umetnuti direktno u tekst. Glavna stvar je sačuvati dokument u UTF-8 kodiranju i da ga urednik podržava. Sami simboli i njihovi kodovi mogu se preuzeti, na primjer, iz LibreOffice Writer-a (slika 3).
Rice. 3. Odabir simbola u LibreOfficeu
Lista sa ručno nacrtanim markerima
Stilovi vam omogućavaju da postavite bilo koju odgovarajuću sliku kao marker kroz svojstvo list-style-image. Vrijednost je relativna ili apsolutna putanja do grafičke datoteke, kao što je prikazano u primjeru 3.
Primjer 3. Upotreba slike kao markera
Liste - Sepulki
- Sepulcaria
- Sepulenie
Najbolje je odabrati malu figuru kako se stavke na listi ne bi pretvorile u natpise. Na sl. 4 prikazuje rezultat primjera korištenja malih slika kao markera.
Rice. 4. Crtež kao marker
Korištenje slike u stilu liste ima neke nedostatke:
- crtež se ne može pomerati gore ili dole;
- u različitim pretraživačima, položaj slike u odnosu na tekst može se razlikovati.
Ovo se može izbjeći korištenjem svojstva pozadine, koje postavlja pozadinsku sliku. Za svaku stavku liste
- uklanjamo originalne markere i postavljamo pozadinu bez ponavljanja. I kako se tekst ne bi pojavio na vrhu slike, pomičemo ga udesno kroz padding-levo (primjer 4).
Primjer 4. Korištenje pozadine
Ul (margin-left: -1em;) li (list-style: none; background: url (images / bullet.png) no-repeat 0 2px; padding-left: 20px;)
Položaj teksta i markera
Postoje dva načina da se marker pozicionira u odnosu na tekst: marker se pomera van ivice stavki liste ili omotava oko teksta (slika 5).
unutra vani Rice. 5. Postavljanje markera u odnosu na tekst
Svojstvo list-style-position se koristi za kontrolu položaja markera. Ima dva značenja: spolja - markeri se postavljaju izvan tekstualnog bloka (ovo je podrazumevano) i unutra - markeri su deo tekstualnog bloka i prikazuju se u stavci liste (primer 5).
Primjer 5. Promjena položaja markera
Liste - Prije početka rada provjerite opremu uključenu u 3BM komplet.
- U nedostatku jednog ili više perifernih uređaja, trebali biste odmah kontaktirati tehničko osoblje VC-a.
- Nakon vizuelnog pregleda vašeg radnog područja, možete pažljivo uključiti napajanje 3BM.
Rezultat ovog primjera prikazan je na sl. 6.
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 vodiču o osnovnom HTML-u. Prije čitanja ove lekcije, preporučujem da prođete kroz prethodne dvije:
Č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. To može biti lista linkova koji se odnose na istu temu, detaljno objašnjenje pojedinih dijelova teksta. 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ču1.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 dodijelili je našoj listi sa nabrajanjem:
<html> <glava> <naslov> Primjer liste s nabrajanjem s praznim markerom u krugu</ naslov> </ glava> <tijelo> <p> zvijezde:</ p> <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ču1.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čuVažna napomena: ovo se više ne koristi za stiliziranje lista sa nabrajanjem. Postoji jasna razlika između CSS-a (pročitajte šta je CSS) i HTML-a. HTML je za označavanje, a CSS je za dobar izgled.
Kôd koji sadrži ovaj atribut, kada specificirate tip trenutnog dokumenta 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" listeShvatili smo liste s naznakama. Pređimo sada na numerisane liste, a zatim ćemo pogledati ugniježđene liste i nekoliko gotovih primjera koji se najčešće koriste na stvarnim stranicama.
2. Numerisane liste u HTML-u
Za razliku od prethodne vrste lista, numerisane liste imaju jednu važnu osobinu: automatski dodaju numerisanje. Ovo je korisno kada trebate numerisati veliku listu. Ručno će potrajati jako dugo, ali 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> <p> jedan do pet:</ p> <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 podrazumevanim postavkama u pretraživaču:
Rice. 2.1. Numerisana lista u pretraživaču sa standardnim postavkamaKao 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
Markeri u obliku malih latiničnih 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> <p> Počinjemo numerisati od dvanaest:</ p> <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 proizvoljnog broja u numerisanoj listiNa 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-uNapravili smo listu na više nivoa koristeći oznaku (tag
- ). Višeslojna lista sa Citroen modelima dolazila je sa drugim oznakama. Glavna lista sa popunjenim oznakama, a lista 2. nivoa sa praznim kružićima. Ali zapamtite, sa atributom "type" možemo nadjačati markere (bolje ih je postaviti).
- Prva linija
- Drugi
- Poslednji element
- - popunjen krug (podrazumevano);
- - otvoreni krug;
- - kvadrat
- Marker u obliku popunjenog diska
- Marker u obliku neobojenog diska
- Square
- Prva linija
- Druga tačka
- Treća linija
- - numerisanje će se vršiti običnim arapskim brojevima (ista opcija će se koristiti po defaultu, u nedostatku atributa "Type");
- - velika slova kao numeracija;
- - mala slova;
- - veliki rimski brojevi;
- - mali rimski brojevi;
- sa numeracijom velikim rimskim brojevima
- Numeracija malim latiničnim slovima
- Mali rimski brojevi
- Prvi element čiji je broj naveden u OL oznaci atributom start = "23".
- Sljedeća stavka, s brojem jedan viši
- Još jedan još jedan
- Prva stavka sa brojem jedan
- Ovaj element će dobiti broj naveden u atributu value = "32".
- Stavka sa velikim brojem
- Prva tačka
- Sekunda
- Last
- Prvi mandat
- Opis
- Drugi mandat
- Njegov opis
- 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
Ali možemo kombinovati numerisane i označene višeslojne liste ovako:
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:
Rice. 3.2. Primer višeslojne numerisane liste u listi sa nabrajanjem u pretraživaču4. 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 s izvornim kodom i razbijeni na kartice HTML (struktura), CSS (stilovi) i Rezultat (rezultat).
4.1 Kako napraviti HTML listu u string
Možda ćete morati da HTML listu pretvorite u niz kada kreirate horizontalni meni. Vrlo je jednostavno napraviti:
4.2 Kako napraviti HTML listu bez ikone
Za ovo je odgovorno svojstvo list-style-type u CSS-u (više detalja):
4.3 Kako napraviti listu u HTML centru
Stavka liste je blok stavka, tako da je potrebno centrirati korištenjem paddinga. Ali postoji jedna važna stvar - moramo eksplicitno navesti širinu da bi poravnanje funkcioniralo:
4.4 Kako napraviti listu u HTML-u sa slikama
Dovoljna je samo jedna slika u stilu liste CSS svojstava. 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
Da bismo napravili listu sa više kolona, koristićemo CSS svojstvo broja kolona (ovo svojstvo je podržano samo u sledeć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:
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:
Unutar otvaranja i zatvaranja UL tagova mogu biti samo LI elementi, 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 bulleted (neuređenog) listinga, a sve što ćete vidjeti na web stranici unutar njega implementirano je korištenjem sadržaja LI elemenata.
Za UL, možete promijeniti tip markera tako što ćete u njega upisati različite vrijednosti 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, primjenjujući ovu vrstu markera na sve stavke. 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 s različitim tipovima oznaka za svaku stavku:
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:
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:
Primjer numerirane liste s različitim vrstama numeriranja za svaku stavku:
Prilikom kreiranja numerisanih lista, takođe je moguće započeti numerisanje ne od jednog, već od broja navedenog u START atributu. Na primjer:
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:
Stiliziranje lista u CSS-u (Style Sheets)
Ali, u pravilu, sada se izgled markera ne postavlja preko atributa TYPE, već za koji su napisana odgovarajuća svojstva.
Ovdje ću samo dati primjer različitih oznaka za nenumerisane liste, čiji je izgled postavljen kroz posebnu datoteku sa kaskadnim stilovima.
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).
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, samo sadržaj sa inline oznakama može se umetnuti unutar DT elementa (ispada da unutar DT neće biti moguće koristiti zaglavlje bloka i elemente pasusa). A unutar DD tagova, možete umetnuti bilo koje elemente, i inline i blok.
Ugniježđena lista u HTML-u je kreiran po analogiji sa jednostavnim, 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:
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 link i sliku (fotografiju) u HTML - IMG i A tagove 
Html obrasci 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 izbornika i obrasca za tekst 
Kako se boje postavljaju u Html i CSS kodu, odabir RGB nijansi u tabelama, Yandex i drugi programi 
Embed i object - Html oznake za prikazivanje medijskog sadržaja (video, flash, audio) na web stranicama 
Oznake i atributi naslova H1-H6, 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
Slika 7. Rad primjera. Osim toga, u našem radu ne znamo uvijek koji će element slijediti onaj koji koristi float. Idealno bi bilo zatvoriti svojstvo float u istom bloku u kojem je otvoreno.
Ovo se radi pomoću pseudo-elementa. Evo koda:
Listajte horizontalno Sada imamo 100% ispravan kod.
Slika 8. Primjer rada. Ova tehnika sa svojstvom float obično se koristi kada se kodiraju stranice za poravnavanje kolona koje kreiraju oznake
... Na ovaj način dobijamo normalnu konstrukciju stubova sa potrebnom visinskom poravnatom. Kada kreiramo meni, tada nam u većini slučajeva visina blokova nije bitna, ona je skoro uvek ista. Stoga je korištenje pravila (prikaz: inline-blok) sasvim razumno u ovim slučajevima.Ali radi potpunosti otkrivanja teme, ovdje smo se upoznali sa svim mogućim opcijama. Iako mogu postojati i drugi načini, na primjer, korištenje CSS tabela, pretraživači snažno preporučuju korištenje tablica samo za njihovu namjenu, a ne za organiziranje navigacijskih elemenata ili bilo čega drugog.
Liste sa nabrajanjem vam omogućavaju da razbijete veliki tekst u zasebne blokove, od kojih svaki počinje nabrakom - obično malom tačkom. To skreće pažnju čitaoca na tekst i povećava njegovu čitljivost.
Sa elementom
- sljedeće karakteristike su povezane:
Slika 1 prikazuje rezultat primjera koji ilustruje gornje karakteristike liste sa nabrajanjem.
Rice. 1. Pogled na listu sa nabrajanjem
Tip markera
Markeri mogu uzeti jednu od tri vrste: popunjeni krug (podrazumevano), otvoreni krug i kvadrat. Da biste odabrali tip markera, koristite svojstvo tip-stil liste ili univerzalni stil liste (primjer 1). Primjenjuju se sljedeće vrijednosti:
Primjer 1. Promjena izgleda markera
Liste Primjer pokazuje kako kreirati listu s nabrajanjem koristeći mali čvrsti kvadrat kao ikonu za nabrajanje. Iako je broj vrijednosti ograničen na tri, to ne znači da na raspolaganju imamo samo tri vrste markera. Postoji mnogo specijalnih znakova koji mogu uspješno djelovati kao ikona markera. "Zavrnite" ih direktno
- na mestu gde se sastaje
U isto vrijeme, na prvi pogled, sve funkcionira. Ali hajde da zamijenimo naše liste. Stavimo listu sa menijem klase-1 u kodu ispred liste sa menijem klase-2 (sada je ispod).
Ovo je ono što dobijamo kao rezultat:
Slika 6. Primjer operacije. Stavke donjeg menija se takođe kreću oko vrha menija, jer efekat svojstva float nije poništen i primenjuje se na sve naredne stavke.
Kako riješiti ovaj problem?
Da biste to učinili, morate koristiti svojstvo clear, ono poništava tok elementa oko drugog elementa, ako ima postavljeno svojstvo float.
Evo modificiranog primjera koji koristi svojstvo clear:
Listajte horizontalno Vidi se da se donja lista više ne drži za gornju, elementi ne prelaze jedan preko drugog. Ali na prvoj listi oznake
- je također blok element.
