Jedina razlika je u tome što je ova oznaka strogo napravljena za popise numeriranja. Naziv oznake dolazi od engleske kratice "Ordered List" - numerirani popis.
Sintaksa oznake
- Stavka broj 1
- Stavka broj 2
- Stavka broj 3
- ...
Gdje atribut type = "value" može imati sljedeće vrijednosti
- A - postavlja oznake u obliku velikih latiničnih slova (A, B, C ..);
- a - postavlja oznake u obliku malih latiničnih slova (a, b, c ..);
- I - postavlja oznake u obliku velikih rimskih brojeva (I, II, III, IV ..);
- i - specificira oznake u obliku malih rimskih brojeva (i, ii, iii, iv ..);
- 1 (zadano) - određuje oznake u obliku arapskih brojeva (1, 2, 3 ..);
Atribut start = "value" postavlja početnu vrijednost (početnu vrijednost) izvješća.
Obrnuti atribut navodi obrnuti broj (ako je potrebno).
Označiti
- zahtijeva obveznu upotrebu završne oznake
Uparena oznaka koristi se za formiranje stavki popisa
Bilješka
Unutar popisa možete promijeniti račun u svoj. Za to postoji posebna vrijednost atributa = "" za oznaku
- Stavka broj 1
- Stavka broj 2
- Stavka broj 3
Primjeri s numeriranim popisima u html-u ( )
Primjer 1. Numerirani html popis u obliku latiničnih slova
Primjer s velikim slovima
- Stavka broj 1
- Stavka broj 2
- Stavka broj 3
- Stavka broj 1
- Stavka broj 2
- Stavka broj 3
Primjer s malim slovima
- Stavka broj 10
- Stavka broj 11
- Stavka broj 12
Ovako to izgleda na stranici:
- Stavka broj 1
- Stavka broj 2
- Stavka broj 3
Primjer 2. Numerirani html popis latiničnim slovima
Primjer s velikim slovima
- Stavka broj 1
- Stavka broj 2
- Stavka broj 3
Ovako to izgleda na stranici:
- Stavka broj 1
- Stavka broj 2
- Stavka broj 3
Primjer s malim slovima
- Stavka broj 1
- Stavka broj 2
- Stavka broj 3
Ovako to izgleda na stranici:
- Stavka broj 1
- Stavka broj 2
- Stavka broj 3
Primjer 3. Numerirani html popis različitih početnih pozicija
Primjer koji pokazuje mogućnosti start atributa, koji vam omogućuje postavljanje početne vrijednosti brojača.
- Stavka broj 1
- Stavka broj 2
- Stavka broj 3
Ovako to izgleda na stranici:
- Stavka broj 1
- Stavka broj 2
- Stavka broj 3
Primjer 4. Promjena računa u numeriranim html listama
Ispod je primjer s mogućnošću promjene vrijednosti brojača pomoću atributa value prilikom prikaza novih elemenata u oznakama
- Stavka broj 1
- Stavka broj 2
- Stavka broj 3
- Stavka #4
Ovako to izgleda na stranici:
- Stavka broj 1
- Stavka broj 2
- Stavka broj 3
- Stavka #4
Primjer 5. Reverzibilna numerirana lista u html-u
Ispod je primjer popisa obrnutih brojeva (brojeći obrnutim redoslijedom).
- Stavka broj 1
- Stavka broj 2
- Stavka broj 3
- Stavka #4
Ovako to izgleda na stranici:
- Stavka broj 1
- Stavka broj 2
- Stavka broj 3
- Stavka #4
Zadatak
Prikaži popis s grafičkim oznakama vodoravno bez oznaka.
Riješenje
Oznaka popisa s grafičkim oznakama
- prema zadanim postavkama izlazi stavke
- okomito jedan iznad drugog. Za izradu navigacijskih elemenata, u nekim je slučajevima prikladno prikazati popis vodoravno. Postoji nekoliko načina da dobijete ovaj prikaz popisa.
Već biste trebali biti svjesni da HTML sadrži blok i inline elemente. Inline elementi ne stvaraju vlastite blokove, primjeri takvih elemenata su oznake ili ... Elementi bloka prikazuju se u novom retku i stvaraju pravokutni blok, primjer takvih oznaka
iliDakle, oznaka
- je također blok element.
Označiti
- ne ponaša se kao blok element, možete koristiti CSS da biste ga učinili umetnutim.
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 horizontalni popis pretvaranjem njegovih stavki u inline elemente. U CSS stilu ćemo napisati pravilo u kojem je svojstvo prikaza postavljeno na li selektor s vrijednošću umetnutom.
Popis vodoravno Dakle, ovaj stil je funkcionirao i dobio je stavke popisa vodoravno:
Slika 1. Rad primjera #1.
Ova metoda ima nedostatke. To je zato što inline elementi imaju neka ograničenja u usporedbi s blok elementima. Na primjer, ne mogu im se dati širina i visina, ali blokovi mogu.
Na primjer, želimo da element izbornika koji stvaramo ima širinu od 150px i visinu od 40px. Pokušajmo promijeniti stil na sljedeći, odnosno dodati dva pravila koja postavljaju veličinu stavke izbornika:
Ove izmjene neće rezultirati promjenama. Da bi stavke izbornika bile vodoravno pozicionirane i da bi mogle postaviti njihovu širinu i visinu, potrebno ih je postaviti na tip inline-block. Promijenimo kod našeg primjera:
Popis vodoravno Ovaj kod radi i promjene su vidljive:
Slika 2. Rad primjera #2. Ali mogu postojati različite opcije, na primjer, moramo prikazati ugniježđene popise u izborniku:
Ugniježđeni popis. Ovdje je izlaz ovog koda:
Slika 3. Rad primjera №3. Vidimo da blokovi nisu poravnati po visini kako bismo željeli. Naravno, možete odrediti istu visinu za sve blokove, ali ne znamo uvijek njezinu točnu vrijednost unaprijed i može se promijeniti.
Ali zapravo, zašto se to događa?
Naši blokovi imaju svojstvo prikaza postavljeno na inline-block. To znači da imaju kvalitete i blok elemenata (mogućnost određivanja širine i visine) i inline elemenata. Ono što vidimo je kvaliteta inline elemenata.
Pogledajmo niz s "A" znakovima različitih veličina:
A A A A A A A
Vidimo da su sva slova okomito poravnata s donjom linijom. Točnije, uz baznu liniju, ali sada nećemo ulaziti u džunglu. Dakle, isto se dogodilo i s našim blokovima.
Svojstvo vertical-align koristi se za vertikalno poravnavanje teksta. U našem primjeru # 3, želimo koristiti vrijednost top, koja će poravnati gornji rub elementa s vrhom najvišeg elementa u retku.
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". CSS obrub sam namjestio na najviše slovo tako da se vidi da zapravo nema skoka, postoji prazan prostor između gornjeg ruba (duž kojeg dolazi do poravnanja) i gornje točke znaka "A".
Svojstvo vertical-align mora se primijeniti na svaki inline element, ono se ne nasljeđuje. Više o ovom svojstvu možete pročitati: vertical-align.
Nakon ove digresije nastavit ćemo rasporediti stavke popisa vodoravno.
Drugi način
Stavke popisa možete postaviti vodoravno pomoću svojstva float. Ovo svojstvo označava s koje strane je element poravnat, ima dva položaja: lijevo i desno.
Evo primjera korištenja ovog koda:
Popis vodoravno Ovdje je izlaz koda:
Slika 4. Rad primjera. Čini se da primjer funkcionira. Ali postoji jedno upozorenje u korištenju ovog svojstva. Sad ćemo to pogledati. Na primjer, uzmimo kod u kojem postoje dva horizontalna popisa s različitim načinima horizontalnog rasporeda elemenata: display i float:
Popis vodoravno Ovdje je izlaz koda:
Slika 5. Rad primjera. U ovim primjerima, popis kontejnera
- imaju crveni obrub od 1 piksela. No, gornji popis, koji koristi svojstvo prikaza, uključuje stavke popisa. Ali elementi popisa stvorenog korištenjem svojstva float ispadaju iz svog spremnika.
- su još uvijek izvan kontejnera
-
.
- na mjestu gdje se sastaje
- , preglednik automatski dodaje prijelom retka;
- popis ima gornje i donje uvlake;
- markeri se prema zadanim postavkama prikazuju kao popunjeni krug;
- svaki element popisa pomaknut je udesno u odnosu na glavni tekst.
- disk - markeri u obliku ispunjenog 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 oznake popisa koristeći svojstvo stila popisa s vrijednošću ništa i u tekstu ispred sadržaja.
- dodajte naš vlastiti simbol koristeći :: prije pseudoelementa. U primjeru 2, trokut se koristi kao takav marker.
Primjer 2. Korištenje :: prije
Popisi - Sepulki
- Sepulcaria
- Sepulenie
Rezultat ovog primjera prikazan je na sl. 2. Budući da korištenje svojstva stila popisa s vrijednošću none uopće ne uklanja markere, već ih samo skriva od pogleda, popis se pomiče udesno. Da biste se riješili ove značajke, primjer dodaje negativno svojstvo uvlačenja teksta. Njegov zadatak je pomaknuti tekst ulijevo za jedan znak.
Riža. 2. Proizvoljni markeri na popisu
Znak ne mora biti u heksadecimalnom formatu, može se umetnuti izravno u tekst. Glavna stvar je spremiti dokument u UTF-8 kodiranju i da ga urednik podržava. Sami simboli i njihovi kodovi mogu se preuzeti, na primjer, iz LibreOffice Writera (slika 3).
Riža. 3. Odabir simbola u LibreOfficeu
Popis s rukom nacrtanim markerima
Stilovi vam omogućuju da postavite bilo koju prikladnu sliku kao oznaku kroz svojstvo list-style-image. Vrijednost je relativni ili apsolutni put do grafičke datoteke, kao što je prikazano u primjeru 3.
Primjer 3. Korištenje slike kao markera
Popisi - Sepulki
- Sepulcaria
- Sepulenie
Najbolje je odabrati malu figuru kako se stavke popisa ne bi pretvorile u natpise. Na sl. 4 prikazuje rezultat primjera korištenja malih slika kao markera.
Riža. 4. Crtež kao marker
Korištenje slike u stilu popisa ima neke nedostatke:
- crtež se ne može pomicati gore ili dolje;
- u različitim preglednicima položaj slike u odnosu na tekst može se razlikovati.
To se može izbjeći korištenjem svojstva pozadine koje postavlja pozadinsku sliku. Za svaku stavku popisa
- uklanjamo izvorne markere i postavljamo pozadinu bez ponavljanja. A kako se tekst ne bi pojavio na vrhu slike, pomičemo ga udesno kroz padding-lijevo (primjer 4).
Primjer 4. Korištenje pozadine
Ul (margin-left: -1em;) li (list-style: none; background: url (slike / bullet.png) no-repeat 0 2px; padding-left: 20px;)
Položaj teksta i markera
Postoje dva načina za pozicioniranje markera u odnosu na tekst: marker se pomiče izvan granice stavki popisa ili omotava oko teksta (slika 5).
iznutra vani Riža. 5. Postavljanje markera u odnosu na tekst
Svojstvo list-style-position se koristi za kontrolu položaja markera. Ima dva značenja: izvana - markeri se postavljaju izvan tekstualnog bloka (ovo je zadana postavka) i unutar - markeri su dio tekstualnog bloka i prikazuju se u stavci popisa (primjer 5).
Primjer 5. Promjena položaja markera
Popisi - Prije početka rada provjerite opremu uključenu u 3BM komplet.
- U nedostatku jednog ili više perifernih uređaja, odmah se obratite tehničkom osoblju VC-a.
- Nakon vizualnog 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 popisa, razumjeti kako napraviti numerirani popis, svladati oznake koje će pomoći da jednostavan popis s grafičkim oznakama učinite zanimljivijim i uočljivijim s proizvoljnim naznakama. Nakon završetka lekcije, imat ćete razumijevanje o tome gdje se koriste popisi i pod kojim okolnostima se mogu koristiti.
Ovaj je članak treći u ovom kratkom vodiču o osnovnom HTML-u. Prije čitanja ove lekcije, preporučujem da prođete prethodne dvije:
Članak je tek počeo, a možda ćete već primijetiti upotrebu standardnog popisa s grafičkim oznakama. Na mojoj web stranici to izgleda prilično jednostavno: s lijeve strane nalazi se mala uvlaka s crtom i kvadratnom oznakom. Dalje u članku pobliže ćemo pogledati što su markeri, kako napraviti brojeve, a također i kako napraviti vlastiti marker.
U svakom dijelu članka izrada pojedinih popisa bit će popraćena detaljnim objašnjenjima za umetanje pojedinog popisa.
1. Popisi s oznakama u HTML-u
Ova vrsta popisa koristi se za nabrajanje skupa elemenata sličnih po značenju u tekstu. To može biti popis poveznica koje se odnose na istu temu, detaljno objašnjenje pojedinih dijelova teksta. No, pogledajmo kako popisi s grafičkim oznakama izgledaju u kodu:
A ovako to izgleda u pregledniku:
Riža. 1.1. Standardni prikaz HTML neuređenog popisa s grafičkim oznakama u pregledniku1.1 Standardne oznake za popise s grafičkim oznakama
Na gornjoj slici (slika 1.1.) možete vidjeti krugove na početku svake stavke izbornika. Ovo je marker. Prema zadanim postavkama, to je popunjeni krug u pregledniku. U HTML-u postoji nekoliko vrsta 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 pogledajmo kako napraviti HTML popis s grafičkim oznakama u kodu. Iz gornje tablice odabrali smo drugu vrijednost "krug" za atribut tipa i dodijelili je našem popisu s grafičkim oznakama:
<html> <glava> <naslov> Primjer popisa s grafičkim oznakama s praznim markerom u krugu</ naslov> </ glava> <tijelo> <p> Zvijezde:</ p> <ul type = "krug"> <li> Sirius</ li> <li> Arktur</ li> <li> Pollux</ li> <li> Betelgeuse</ li> <li> Sunce</ li> </ ul> </ tijelo> </ html> Pogledajmo kako će ovaj kod izgledati u pregledniku:
Riža. 1.2. Grafički prikaz za popis u obliku kruga u pregledniku1.3 Oznaka popisa u obliku kvadrata
Pogledajmo i posljednji primjer s kvadratnom oznakom za HTML popis:
Obratite pažnju na oznaku, postala je kvadratna:
Riža. 1.3. Oznaka za okvir s popisom kao kvadrat u preglednikuVažna nota: ovo se više ne koristi za oblikovanje popisa s grafičkim oznakama. Postoji jasna razlika između CSS-a (pročitajte što je CSS) i HTML-a. HTML je za označavanje, a CSS za dobar izgled.
Kôd koji sadrži ovaj atribut, kada navedete vrstu trenutnog dokumenta kao HTML5 (""), dat će pogrešku tijekom provjere. Ako niste čuli što je provjera valjanosti, idite ovdje -.
Pogreška će biti sljedeća:
Riža. 1.4. Pogreška na validatoru pri korištenju atributa "type" popisaShvatili smo popise s oznakama. Prijeđimo sada na numerirane popise, a zatim ćemo pogledati ugniježđene liste i nekoliko gotovih primjera koji se najčešće koriste na stvarnim stranicama.
2. Numerirani popisi u HTML-u
Za razliku od prethodne vrste popisa, numerirani popisi imaju jednu važnu značajku: automatski dodaju numeriranje. Ovo je korisno kada trebate numerirati veliki popis. Ručno će potrajati jako dugo, ali se još uvijek možete izgubiti. Numerirani popis je specificiran pomoću oznake. Kako to izgleda u praksi:
Primjer numeriranog popisa:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html> <glava> <naslov> Primjer standardnog numeriranog popisa</ naslov> </ glava> <tijelo> <p> Jedan do pet:</ p> <ol> <li> Prvi</ li> <li> Drugi</ li> <li> Treći</ li> <li>Četvrta</ li> <li> Peti</ li> </ ol> </ tijelo> </ html> Ovako izgleda numerirani popis sa zadanim postavkama u pregledniku:
Riža. 2.1. Numerirani popis u pregledniku sa standardnim postavkamaKao i njegov prethodnik (popis s grafičkim oznakama), ima svoje stilove za prikaz brojeva. Obična numeracija nije jedina vrsta metaka za numerirani popis u HTML-u.
2.1 Standardne oznake za numerirani popis
Ovdje imamo izbor ne između tri vrste markera, već od pet:
Naziv markera Vrijednost atributa "type". Primjer popisa Oznake arapskih brojeva 1 - Badminton
- Bejzbol
Oznake u obliku malih latiničnih slova a - Chomolungma
- Chogori
- Kanchenjunga
Oznake u obliku velikih latiničnih slova A - Pad vrha
- Uličica bijesa
- Insano
Oznake za male rimske brojeve i - Filipinsko more
- arapsko more
- Koraljno more
Veliki rimski brojevi ja - Crvena
- Zelena
- Plava
2.2 Prilagođeno numeriranje na HTML popisu
Osim uobičajenog izlaza numeriranog popisa, također možemo započeti naše numeriranje od bilo koje znamenke. Da biste to učinili, morate postaviti dodatni atribut "start". Ovo numeriranje radi za sve vrste oznaka za numerirane popise. 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 numeriranje za numerirani popis</ naslov> </ glava> <tijelo> <p> Počinjemo brojati 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:
Riža. 2.2. Numeriranje od proizvoljnog broja u numeriranom popisuNa gornjoj slici popis smo numerirali 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, prijeđimo na ugniježđene HTML liste.
3. Kako napraviti višerazinski (ugniježđeni) popis u HTML-u
Višerazinske liste se koriste na stranici u izradi izbornika. Ovaj izbornik najčešće izgleda kao padajući izbornik (lekcija na), ili padajući izbornik lijevo ili desno. Takvi izbornici omogućuju pohranjivanje ostalih stavki izbornika u kompaktnom obliku.
Koristeći modele automobila kao primjer, napravit ćemo popis na više razina 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žđeni popis s grafičkim oznakama</ 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 na to kako izgleda višerazinski popis u pregledniku:
Riža. 3.1. Primjer višerazinskog popisa u HTML-uNapravili smo višerazinski popis koristeći oznaku (oznaku
- ). Višeslojni popis s Citroenovim modelima došao je s drugim oznakama. Glavni popis s popunjenim oznakama, a popis 2. razine s praznim kružićima. No, zapamtite, s atributom "type" možemo nadjačati markere (bolje ih je postaviti).
- Prvi red
- Drugi
- Posljednji element
- - ispunjen krug (zadano);
- - otvoreni krug;
- - kvadratni
- Oznaka u obliku ispunjenog diska
- Marker u obliku neobojenog diska
- Kvadrat
- Prvi red
- Druga točka
- Treći red
- - numeriranje će se vršiti običnim arapskim brojevima (ista opcija će se koristiti prema zadanim postavkama, u nedostatku atributa "Vrsta");
- - velika slova kao numeriranje;
- - mala slova;
- - veliki rimski brojevi;
- - mali rimski brojevi;
- s 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 s brojem jedan
- Ovaj element će dobiti broj naveden u atributu value = "32".
- Stavka s velikim brojem
- Prva točka
- Drugi
- Posljednji
- Prvi mandat
- Opis
- Drugi termin
- Njegov opis
- Prvi odlomak glavnog numeriran
- Druga točka
- Prvi ugniježđeni element označen je s grafičkim oznakama
- Drugi
- Treći i posljednji odlomak označen
- Treća stavka je numerirana
Ali možemo kombinirati numerirane i označene višerazinske liste na sljedeći način:
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> Numerirani, označeni i numerirani popisi u HTML-u</ naslov> </ glava> <tijelo> <ul> <li> Prva skupina tulipana<ol> <li> Prvi razred<ul> <li> Jednostavni rani tulipani</ li> </ ul> </ li> <li> Drugi razred<ul> <li> Dvostruki tulipani</ li> </ ul> </ li> </ ol> </ li> </ ul> </ tijelo> </ html> U gornjem primjeru imamo dvostruko ugniježđenje (2 razine). Prvo, stavili smo u popis dvije klase tulipana, imamo ga numerirani. Zatim, popis s grafičkim oznakama je ugniježđen u svaku od stavki na numeriranom popisu.
Gledamo njegov izgled u pregledniku:
Riža. 3.2. Primjer višerazinskog numeriranog popisa u popisu s grafičkim oznakama u pregledniku4. 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 će primjeri biti odmah s izvornim kodom i raščlanjeni na kartice HTML (struktura), CSS (stilovi) i Rezultat (rezultat).
4.1 Kako pretvoriti HTML popis u niz
Možda ćete morati pretvoriti HTML popis u niz kada stvarate horizontalni izbornik. Vrlo je jednostavno napraviti:
4.2 Kako napraviti HTML popis bez ikone
Za to je odgovorno svojstvo vrste stila liste u CSS-u (više detalja):
4.3 Kako napraviti popis u HTML-u centriran
Stavka popisa je blok stavka, tako da je potrebno centrirati korištenjem paddinga. Ali postoji jedna važna točka - moramo eksplicitno navesti širinu da bi poravnanje funkcioniralo:
4.4 Kako napraviti popis u HTML-u sa slikama
Dovoljna je samo jedna CSS slika-list-style-slika svojstava. Unutar URL-a navedite adresu prije ikone. Samo želim napomenuti da je bolje odmah odabrati malu sliku, jer visina retka popisa ovisi o tome:
4.5 HTML označite svoj marker
U tom slučaju potrebno je unaprijed povezati ikone fonta (na primjer, FontAwesome). Zatim možete napraviti bilo koju ikonu umjesto standardnog markera:
4.6 Kako napraviti popis u HTML-u s više stupaca
Za izradu popisa s više stupaca koristit ćemo CSS svojstvo brojanja stupaca (ovo svojstvo je podržano samo u sljedećim preglednicima: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Također morate postaviti visinu za popis kako biste vidjeli podjelu na više stupaca:
5. Vježbanje rada s listama
U videu ispod možete vidjeti sav rad s HTML listama u praksi:
Pozdrav dragi čitatelji blog stranice. Danas, unutar ovog naslova, želim govoriti o raznim Html listama koji se mogu kreirati na temelju posebno dizajniranih oznaka UL, OL, LI i DL. Uz pomoć para UL i LI izrađuju se bulletirane liste, s OL i LI - numeriranim, a uz pomoć DL, DT i DD stvaraju se tzv. listingi definicija. Također ćemo se ukratko osvrnuti na principe stvaranja ugniježđenih struktura.
Želim vas podsjetiti da smo već uspjeli, uspjeli razgovarati o osnovama modernog, kao io rasporedu stola (). Osim toga, dotakli smo se osnova, dobro, naučili smo kroz.
Popisi s grafičkim oznakama temeljeni na UL i LI oznakama
Oznaka UL koristi se za stvaranje popisa s grafičkim oznakama, a OL se koristi za kreiranje popisa s brojevima. Ove oznake su uparene i blokirane, baš kao i LI element.
Zasebne stavke popisa nalaze se između oznaka otvaranja i zatvaranja, koje su zauzvrat zatvorene u elementu LI otvaranja i zatvaranja. Na vrhu i dnu Html popisa preglednik dodaje uvlačenje jednog retka, slično uvlačenju stvorenom oznakom paragrafa.
Pogledajmo, na primjer, varijantu s grafičkim oznakama koja bi mogla izgledati ovako:
Samo LI elementi mogu biti unutar otvaranja i zatvaranja UL tagova, a već unutar samih tih elemenata (stavki) možete umetnuti bilo koji sadržaj (tekst, slike, naslove, odlomke, poveznice, pa čak i druge liste).
Oni. UL služi samo za organiziranje bulleted (neurednog) popisa, a sve što ćete vidjeti na web stranici unutar njega implementirano je korištenjem sadržaja LI elemenata.
Za UL, možete promijeniti vrstu markera tako da u njega upišete različite vrijednosti za atribut "Type". Ako "Type" (kontrola izgleda markera) nije navedena za UL element, tada će se prikazati zadani tip markera (disk - krug ispunjen bojom teksta):
U gornjim primjerima napisali smo atribut "Type" u UL elementu, primjenjujući ovu vrstu markera na sve stavke. Ali atribut "Type" može se dodijeliti za svaku pojedinačnu oznaku LI postavljanjem vlastite vrste markera za ovu stavku.
Primjer popisa s grafičkim oznakama s različitim vrstama grafičkih oznaka za svaku stavku:
Numerirani popisi u HTML-u na temelju OL oznake
Za izradu numeriranog popisa 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 u širini) i unutar OL-a neće biti moguće smjestiti ništa osim LI elemenata.
Ispostavilo se da su OL i UL servisne oznake koje su potrebne samo da bi pregledniku rekli kakav popis generiramo (označen ili numeriran). U slučaju numeriranog, lijevo od svake stavke nećemo vidjeti marker, već broj i točku iza njega:
Kao što sam već spomenuo, elementi UL, OL i LI imaju mogućnost korištenja atributa TYPE. Omogućuje vam da prilagodite vrstu metka ili da odredite koji brojevi ili slova će biti numerirane stavke na popisu. Za numerirani popis, parametri ovog atributa mogu imati sljedeće vrijednosti:
Primjer numeriranog popisa s različitim vrstama numeriranja za svaku stavku:
Prilikom izrade numeriranih popisa također je moguće započeti numeriranje ne od jednog, već od broja navedenog u atributu START. Na primjer:
Za OL, također možete započeti novo numeriranje od bilo koje vrijednosti, počevši od bilo koje stavke, upisivanjem atributa VALUE s potrebnim brojem u početnom LI ove stavke. Na primjer:
Stiliziranje popisa 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 nenumerirane popise, čiji je izgled postavljen kroz zasebnu datoteku s kaskadnim stilskim listovima.
Ali o tome ćemo govoriti u sljedećim člancima. Ovako je postavljen izgled UL markera na ovom blogu. Slike se koriste kao oznake: za obične stavke nenumeriranog popisa -, za ugniježđene stavke nenumeriranog popisa -.
Posebne i ugniježđene liste u HTML kodu
Treći i posljednji tip naziva se "definicijski popisi" i specificiraju se pomoću tri oznake - DL, DT i DD. DL govori pregledniku da slijedi popis definicija.
Obično se ova vrsta koristi (dobro, ili se pretpostavljalo da će se koristiti) za pisanje rječničkih natuknica, koje se sastoje od pojmova (ograđenih u DT tagovima) i njihovih opisa (uključenih u DD tagove).
Ako pogledate gornji primjer, primijetit ćete da je element DD (opis pojma) pomaknut (40 piksela) u odnosu na DT element (sam termin).
Općenito, DL, DT i DD su blok oznake, a unutar DT elementa može se umetnuti samo sadržaj s umetnutim oznakama (ispada da se elementi bloka naslova i paragrafa ne mogu koristiti unutar DT-a). Unutar DD oznaka možete umetnuti bilo koji element, umetnuti i blok.
Ugniježđeni popis u HTML-u je kreiran po analogiji s jednostavnim, ali unutar glavnog popisa, neke od stavki su opet zatvorene u oznaku za otvaranje i zatvaranje UL ili OL.
Napominjemo da se završni LI stavke u kojoj će ugniježđena stavka biti postavljena samo nakon cijelog koda ugniježđenog popisa (ovo je vrlo važno za njegov ispravan prikaz na web stranici). Ugniježđeni popis mogao bi izgledati otprilike ovako:
Sretno ti! Vidimo se uskoro na stranicama blog stranice
možete pogledati više videozapisa ako odete na
");">
Možda ćete biti zainteresirani
Kako umetnuti link i sliku (fotografiju) u HTML - IMG i A oznake 
Html obrasci za stranicu - oznake Form, Input i Select, Option, Textarea, Label i drugi za izradu elemenata web obrazaca Select, Option, Textarea, Label, Fieldset, Legend - Html oznake padajućeg izbornika i obrasca za tekstni okvir 
Kako se postavljaju boje u Html i CSS kodu, odabir RGB nijansi u tablicama, Yandex i drugi programi 
Embed i object - Html oznake za prikaz medijskog sadržaja (video, flash, audio) na web stranicama 
Oznake i atributi naslova H1-H6, vodoravni red Hr, prijelom reda Br i paragraf P prema standardu Html 4.01 
Tablice u HTML-u - oznake Tablica, Tr i Td, kao i Colspan, Cellpadding, Cellspacing i Rowspan za njihovo stvaranje
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.
To se radi pomoću pseudo-elementa. Ovdje je kod:
Popis vodoravno Sada imamo 100% ispravan kod.
Slika 8. Primjer rada. Ova tehnika sa svojstvom float obično se koristi kod kodiranja web-mjesta za poravnavanje stupaca stvorenih oznakama
... Na taj način dobivamo normalnu konstrukciju stupova s potrebnom visinskom poravnatom. Kada kreiramo jelovnik, tada nam, u većini slučajeva, visina blokova nije bitna, ona je gotovo uvijek ista. Stoga je korištenje pravila (prikaz: inline-block) 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 tablica, tražilice snažno preporučuju korištenje tablica samo za njihovu namjenu, a ne za organiziranje navigacijskih elemenata ili bilo čega drugog.
Popisi s grafičkim oznakama omogućuju vam da razbijete veliki tekst u zasebne blokove, od kojih svaki počinje oznakom - obično malom točkom. To skreće pozornost čitatelja na tekst i povećava njegovu čitljivost.
S elementom
- povezane su sljedeće značajke:
Slika 1 prikazuje rezultat primjera koji ilustrira gornje značajke popisa s grafičkim oznakama.
Riža. 1. Prikaz popisa s grafičkim oznakama
Vrsta markera
Markeri mogu uzeti jednu od tri vrste: ispunjeni krug (zadano), otvoreni krug i kvadrat. Za odabir vrste markera upotrijebite svojstvo tip-stil popisa ili univerzalni stil popisa (primjer 1). Primjenjuju se sljedeće vrijednosti:
Primjer 1. Promjena izgleda markera
Popisi Primjer pokazuje kako stvoriti popis s grafičkim oznakama koristeći mali čvrsti kvadrat kao ikonu s grafičkim oznakama. Iako je broj vrijednosti ograničen na tri, to ne znači da na raspolaganju imamo samo tri vrste markera. Postoji mnogo posebnih znakova koji mogu uspješno djelovati kao ikona markera. "Zavijte" ih izravno na
- na mjestu gdje se sastaje
U isto vrijeme, na prvi pogled, sve funkcionira. Ali zamijenimo popise. Stavimo popis s klasom izbornik-1 u kod prije popisa s klasnim izbornikom-2 (sada je ispod).
Ovo je ono što dobivamo kao rezultat:
Slika 6. Primjer operacije. Stavke donjeg izbornika također se kreću oko vrha izbornika, jer učinak svojstva float nije otkazan i primjenjuje se na sve sljedeće stavke.
Kako riješiti ovaj problem?
Da biste to učinili, trebate upotrijebiti svojstvo clear, ono poništava tok elementa oko drugog elementa, ako ima postavljeno svojstvo float.
Evo izmijenjenog primjera pomoću svojstva clear:
Popis vodoravno Vidi se da se donja lista više ne drži za gornju, elementi ne prelaze jedan preko drugog. Ali na prvom popisu oznake
- je također blok element.
