Numerirani popisi su zbirka stavki s njihovim rednim brojevima. Vrsta i vrsta numeriranja ovise o parametrima elementa
- , koji se koristi za kreiranje popisa. Sljedeće vrijednosti mogu se koristiti kao elementi numeriranja:
- arapski brojevi (1, 2, 3, ...);
- Arapski brojevi s početnom nulom za znamenke manje od deset (01, 02, 03, ..., 10);
- 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, ...);
- armensko numeriranje;
- Gruzijska numeracija.
- ... Bilo koji pozitivan cijeli broj može se navesti kao vrijednost. Nije važno koja je vrsta numeriranja postavljena, čak i ako se latinična slova koriste kao popis. Ako se atributi početka i vrijednosti primjenjuju na popis u isto vrijeme, onda potonji imaju prednost i numeriranje se prikazuje od broja određenog vrijednošću, kao što je prikazano u primjeru 1.
Primjer 1. Ponovno numeriranje popisa
Popisi - Trebali biste dobro paziti na svoje radno mjesto.
- Prilagodite rasvjetu u prostoriji tako da izvor svjetlosti bude sa strane ili iza operatera.
- Kako biste izbjegli medicinske komplikacije, preporuča se odabrati stolicu s mekim sjedalom.
Prvi element liste u ovom primjeru počinje rimskim brojem IV, budući da je naveden atribut start = "4", zatim slijedi broj V, a posljednji element slijedi izvan reda i dodjeljuje mu se broj X (Sl. . 1).
Riža. 1. Rimski brojevi u popisu
Pisanje brojeva
Prema zadanim postavkama, numerirani popis ima određeni oblik: prvo postoji broj, zatim točka, a zatim se tekst prikazuje kroz razmak. Ovaj oblik pisanja je jasan i prikladan, ali neki programeri radije vide drugačiji način oblikovanja numeriranja popisa. Naime, umjesto točke nalazi se završna zagrada, kao što je prikazano na sl. 2 ili nešto slično.
Riža. 2. Prikaz numeriranog popisa sa zagradama
Stilovi vam omogućuju promjenu načina na koji se popisi prenumeriraju pomoću svojstava sadržaja i kontrainkrementa. Najprije morate postaviti counter-reset: stavku za ol selektor, to je potrebno kako bi numeriranje na svakom novom popisu počelo ispočetka. U suprotnom, numeriranje će se nastaviti i umjesto 1,2,3 vidjet ćete 5,6,7. Vrijednost stavke je jedinstveni identifikator brojača, sami ga biramo. Zatim morate sakriti izvorne markere kroz svojstvo stila tipa popisa s vrijednošću ništa.
Svojstvo sadržaja obično radi u sprezi s pseudoelementima :: poslije i :: prije. Dakle, li :: prije konstrukcije kaže da se prije svakog elementa liste mora dodati neki sadržaj (primjer 2).
Primjer 2. Izrada vlastite numeracije
Li :: prije (sadržaj: brojač (stavka) ")"; / * Brojevima dodajte zagradu * / kontrainkrement: stavka; / * Postavite naziv brojača * /)
Svojstvo sadržaja s brojačem vrijednosti (stavkom) daje broj; dodavanjem zagrade kao što je prikazano u ovom primjeru, dobivamo traženu numeraciju. kontrainkrement je potreban za povećanje broja popisa za jedan. Imajte na umu da se isti identifikator nazvan item koristi svuda. Konačni kod je prikazan u primjeru 3.
Primjer 3. Promjena prikaza liste
Popisi - Prvi
- Drugi
- Treći
- Četvrta
Na taj način možete napraviti bilo koju vrstu numeriranog popisa, na primjer, uzeti broj u uglastim zagradama, u ovom slučaju će se samo jedan redak promijeniti u stilovima.
Sadržaj: "[" brojač (stavka) "]";
Popis s ruskim slovima
Postoji numerirani popis s latiničnim slovima, ali za popis nema ruskih slova. Mogu se dodati umjetno koristeći gornju tehniku. Budući da se numeriranje vrši kroz stilove, sam popis ostaje originalan, dodaje mu se samo odabrana klasa, nazovimo je ćirilica (primjer 4).
Primjer 4. Kod za izradu popisa
- Jedan
- Dva
- Tri
Dodavanje slova se vrši pomoću pseudoelementa :: ispred i svojstva content. Budući da svaki redak mora imati svoje slovo, koristit ćemo pseudo-klasu: nth-child (1), broj slova je napisan u zagradama. Prvo slovo je, naravno, A, drugo je B, treće je C itd. Cijeli ovaj skup se dodaje li selektoru na sljedeći način (primjer 5).
Primjer 5. Korištenje: nth-child pseudo-klase
Ćirilica li: n-to dijete (1) :: prije (sadržaj: "a)"; ) .cyrilic li: nth-child (2) :: prije (sadržaj: "b)"; ) .cyrilic li: nth-child (3) :: prije (sadržaj: "in)"; )
U ovom primjeru, nakon svakog slova slijedi zagrada, sva mala. Možete definirati vlastiti način numeriranja popisa, na primjer, može sadržavati velika slova s točkom, s jednom ili dvije zagrade ili samo slova. Za razliku od standardnog numeriranja, ovdje možemo raditi što god želimo. Popis od deset slova trebao bi biti dovoljan za gotovo sve situacije, ali ako se to odjednom pokaže nedovoljno, ništa nas ne sprječava da proširimo popis na barem sva slova ruske abecede.
Na kraju postavljamo poravnanje i položaj slova, po želji naznačujemo veličinu fonta, boju i druge parametre (primjer 6).
Primjer 6. Popis s ruskim slovima
Popis - Boršč
- Kotleti od štuke
- Kulebyaka
- Gljive u kiselom vrhnju
- Palačinke s kavijarom
- Kvas
Rezultat ovog primjera prikazan je na sl. 3.
Popis s grafičkim oznakama definira se dodavanjem male oznake ispred svake stavke popisa, obično ispunjenog kruga. Sam popis se formira pomoću spremnika
- , a svaka stavka popisa počinje oznakom
- kao što je prikazano niže.
- Prva točka
- Druga točka
- Treća točka
Završna oznaka mora biti prisutna na popisu.
iako nije potrebno, savjetujemo vam da ga uvijek dodate kako biste jasno odvojili stavke na popisu.
- Čeburaška
- Krokodil Gena
- Shapoklyak
- Štakor Larisa
- Prvi
- Drugi
- Treći
- Prvi
- Drugi
- Treći
- Prvi
- Drugi
- Treći
- promjena vjerskih uvjerenja (neobavezno: budizam, konfucijanizam, hinduizam). Posebna ponuda - Judaizam i Islam zajedno;
- promjena uvjerenja u nepogrešivost voljene strane;
- uvjerenje da vanzemaljci postoje;
- preferiranje političkog sustava kao najboljeg svoje vrste (fakultativno: feudalizam, socijalizam, komunizam, kapitalizam).
- (LI - Stavka popisa). Označiti
- ne treba odgovarajuću završnu oznaku, iako njezina prisutnost u načelu nije zabranjena. Preglednici obično započinju svaku novu stavku popisa u novom retku kada prikazuju dokument.
Dostavljene informacije dovoljne su za izradu elementarnog popisa s grafičkim oznakama. Evo primjera HTML dokumenta koji koristi popis s grafičkim oznakama, koji se prikazuje u pregledniku kao što je prikazano na Sl. 2.1.
Primjer popisa s oznakama Horoskopski znakovi:
- Ovan
- Bik
- Blizanci
- Djevica
- vage
- Škorpion
- Strijelac
- Jarac
- Vodenjak
- Ribe
Riža. 2.1. Preglednik Prikaži popis s oznakama
Imajte na umu da pored stavki popisa označenih oznakom
- , mogu biti prisutni i drugi HTML elementi. U gornjem primjeru, jedan od tih elemenata je običan tekst, koji nije stavka popisa, ali igra ulogu svog naslova.
Bilješka
Neki HTML udžbenici upućuju vas da koristite oznaku spremnika za postavljanje naslova popisa.
(LH - Zaglavlje popisa, zaglavlje popisa). Ovu oznaku trenutno ne prepoznaje nijedan od glavnih preglednika i nije dio HTML specifikacije. Time njegova primjena postaje besmislena, iako neće dovesti do grešaka. U oznaci
- mogu se odrediti dva parametra: COMPACT i TYPE.
- .
Primjer snimanja:
- .
Bilješka
Preglednici imaju različita tumačenja za određivanje vrste grafičkih oznaka za pojedinačnu stavku popisa. Netscape preglednik mijenja tip markera za ovu i sve sljedeće sve dok ne naiđe na drugo nadjačavanje vrste markera. Internet Explorer mijenja oznaku samo za ovaj element.
Grafičke oznake popisa
Grafika se može koristiti kao oznake popisa, što se naširoko koristi za stvaranje atraktivnih, lijepo dizajniranih HTML dokumenata. Zapravo, takvu mogućnost ne pruža izravno HTML jezik, već je implementirana donekle umjetno. To ne znači da se to ne preporučuje ili osuđuje, već samo znači da se ovdje neće koristiti posebne konstrukcije HTML jezika.
Da biste razumjeli ideju, morate razumjeti kako se popisi implementiraju u HTML stranice. Ispada da je oznaka popisa
- (kao i oznake drugih vrsta popisa, razmatranih u nastavku) obavlja jedini zadatak - govori pregledniku da sve informacije koje se nalaze nakon ove oznake trebaju biti prikazane s pomakom udesno (uvučeno) za određeni iznos. Oznake
- koji upućuju na pojedinačne stavke popisa daju standardne oznake stavki popisa.
Ako trebamo napraviti popis s grafičkim oznakama, onda možemo i bez oznaka.
- ... Bit će dovoljno umetnuti željenu grafičku sliku ispred svakog elementa popisa. Jedini problem koji u ovom slučaju treba riješiti bit će odvajanje elemenata popisa jedan od drugog. Za to možete koristiti oznake odlomaka
Ili prisilno pomicanje reda
... Primjer implementacije popisa s grafičkim oznakama, čiji je prikaz prikazan na Sl. 2.2 prikazan je u nastavku:koji će se prenositi samo jednom. Veličina datoteke koja sadrži malu sliku također je iznimno mala.
Bilješka
Metode za izradu popisa s grafičkim oznakama razmatrane su redom u 8. poglavlju.
HTML podržava tri različite vrste popisa, od kojih svaki ima svoj popis:
Numerirani popisi
U numerirani popis, preglednik automatski umeće brojeve stavki redom, počevši od neke vrijednosti (obično 1). To vam omogućuje umetanje i brisanje stavki na popisu bez prekida numeriranja, budući da će se ostali brojevi automatski ponovno izračunati.
Numerirani popisi kreiraju se pomoću elementa bloka
Označiti- stavka 1
- stavka 2
- stavka 3
Elementi numeriranog popisa moraju sadržavati više elemenata popisa, kao što je prikazano u sljedećem primjeru:
Primjer: Numerirani popis
- Pokušajte sami"
Korak po korak upute
- Uzmi ključ
- Umetnite ključ u bravu
- Okrenite ključ za dva okreta
- Izvadite ključ iz brave
- Otvori vrata
Korak po korak upute
- Uzmi ključ
- Umetnite ključ u bravu
- Okrenite ključ za dva okreta
- Izvadite ključ iz brave
- Otvori vrata
Ponekad, kada gledate postojeće HTML kodove, naići ćete na argument tip u elementu
- A - velika latinična slova (A, B, C...);
- a - mala latinična slova (a, b, c...);
- I - veliki rimski brojevi (I, II, III...);
- i - mali rimski brojevi (i, ii, iii...);
- 1 - arapski brojevi (1, 2, 3...) (koristi se prema zadanim postavkama).
- na sljedeći način:
-
U tom slučaju, sekvencijalno numeriranje popisa će se prekinuti i numeriranje će početi ispočetka od ove točke, u ovom slučaju od sedam.
Primjer korištenja atributa vrijednost označiti
U ovom primjeru, "Prva stavka s popisa" bila bi broj 1, "Stavka druge liste" bi bila broj 7, a "Treća stavka popisa" bi bila broj 8.
Formatiranje numeriranih popisa pomoću CSS-a
Za promjenu brojeva popisa koristite svojstvo list-style-type CSS tablice stilova:
- ... Preglednik uvlači svaku stavku popisa i automatski prikazuje oznake.
- Prva točka
- Druga točka
- Treća točka
- nije potrebno postavljati samo tekst, dopušteno je postaviti bilo koji element streaming sadržaja (linkove, odlomke, slike itd.)
- moguće je kreirati ugniježđeni popis ili popis druge razine. Da biste ugnijezdili popis, opišite novi popis unutar elementa
- već dostupna lista. Kada ugnijezdite jedan popis s grafičkim oznakama u drugi, preglednik automatski mijenja stil grafičkih oznaka za popis druge razine. Bilo koji popis može biti ugniježđen unutar drugog. Sljedeći primjer pokazuje strukturu popisa s grafičkim oznakama ugniježđenog unutar druge numerirane stavke.
- Pokušajte sami"
- ponedjeljak
- Poslati mail
- Posjet uredniku
- Odabir teme
- Uređen dizajn
- Završno izvješće
- Večernje gledanje poruka
- utorak
- Revidirajte raspored
- Pošaljite slike
- Srijeda...
- ponedjeljak
- Poslati mail
- Posjet uredniku
- Odabir teme
- Uređen dizajn
- Završno izvješće
- Večernje gledanje poruka
- utorak
- Revidirajte raspored
- Pošaljite slike
- Srijeda...
- Pokušajte sami"
- Kava
- Kava
- Kava
- Kava
- Kava
- Mlijeko
- Kava
- Mlijeko
- Kava
- Mlijeko
- Kava
- Mlijeko
- Pokušajte sami"
- Bik
- Blizanci
- Ovan
- Bik
- Blizanci
- (od engleskog Definition Term - definirana riječ, pojam) i
- (od engleskog Definition Description - opis definiranog pojma).
- Prvi mandat
- Opis prvog pojma
- Drugi termin
- Opis drugog pojma
- Pokušajte sami"
- Svjetska mreža
- - od engleskog. World Wide Web (WWW) je distribuirani sustav koji omogućuje pristup međusobno povezanim dokumentima koji se nalaze na različitim računalima spojenim na Internet.
- Internet
- - skup mreža koje koriste jedan protokol razmjene za prijenos informacija.
- stranica
- - skup pojedinačnih web stranica koje su povezane poveznicama i jednim dizajnom.
- Badminton
- Bejzbol
- Chomolungma
- Chogori
- Kanchenjunga
- Pad vrha
- Uličica bijesa
- Insano
- Filipinsko more
- arapsko more
- Koraljno more
- Crvena
- Zelena
- Plava
Stilovi za numerirane popise
Primjer Značenje Opis a, b, c niži alfa Mala slova A, B, C gornji alfa Velika slova ja, ii, iii nižerimski Rimski brojevi malim slovima I, II, III gornjorimski Veliki rimski brojevi Primjer: Primjena CSS svojstva list-style-type
Popisi s oznakama
Popisi s oznakama u osnovi su slični popisima s brojevima, osim što ne sadrže sekvencijalno numeriranje stavki. Popisi s grafičkim oznakama kreiraju se pomoću elementa bloka
OznačitiU sljedećem primjeru možete vidjeti da se prema zadanim postavkama ispred svake stavke popisa dodaje mala popunjena oznaka kruga:
Unutar oznake
Ugniježđene liste
Bilo koji popis može biti ugniježđen unutar drugog. Unutarnji elementPrimjer: Ugniježđeni popisi
Formatiranje popisa s grafičkim oznakama
Da biste promijenili izgled oznake popisa, koristite svojstvo list-style-type CSS tablice stilova:
Sljedeći primjer prikazuje različite stilove popisa s grafičkim oznakama:
Primjer: stilovi popisa s oznakama
disk:
Krug:
Kvadrat:
ništa:
Grafički markeri.
HTML ima mogućnost stvaranja popisa s grafičkim oznakama. Jedno je kada su oznake na popisu standardni krugovi ili kvadrati, a sasvim drugo kada programer sam odabire marker u skladu s dizajnom stranice. Male se slike često koriste kako bi stavke s popisa izgledale lijepo.
Za zamjenu običnog markera grafičkim, zamijenite svojstvo list-style-type po nekretnini slika u stilu liste i navedite URL-adresu slike:Primjer: Grafički markeri
horoskopski znakovi
horoskopski znakovi
Popisi definicija (opisa).
Popisi definicija vrlo su praktični za stvaranje, na primjer, vašeg osobnog rječnika pojmova. Svaka stavka na popisu definicija ima dva dijela: pojam i njegovu definiciju.
Cijeli popis stavljate u element
Popisi definicija često se koriste u znanstvenim, tehničkim i obrazovnim publikacijama, izrađujući uz njihovu pomoć pojmovnike, rječnike, priručnike itd.Opća struktura popisa opisa je sljedeća:
Sljedeći primjer pokazuje jednu od mogućih upotreba za popis definicija:
Primjer: Popis definicija
World Wide Web - s engleskog. World Wide Web (WWW) je distribuirani sustav koji omogućuje pristup međusobno povezanim dokumentima koji se nalaze na različitim računalima spojenim na Internet. Internet je skup mreža koje koriste jedan protokol razmjene za prijenos informacija. Stranica je skup pojedinačnih web stranica koje su povezane poveznicama i jednim dizajnom.
Prema zadanim postavkama, tekst pojma je pritisnut na lijevi rub prozora preglednika, a opis pojma je pozicioniran ispod i pomaknut udesno.
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 Oznake u obliku malih latiničnih slova a Oznake u obliku velikih latiničnih slova A Oznake za male rimske brojeve i Veliki rimski brojevi ja 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).
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:
Za konsolidaciju primljenih informacija, preporučujem da sve korake učinite ručno. Isprobajte različite oznake za popise, izradite numerirane popise, a zatim prijeđite na višerazinske (ugniježđene) popise i eksperimentirajte s njima.
Ovdje završavamo s popisima i prelazimo na sljedeću lekciju o slikama.
Vježbajte više!
Lekcija 3. Kako napraviti popis u HTML-u 4.91 /5 (98.26%) 23 glasova
Ovdje: tip je znakova popisa:
Ako želite da popis počinje s brojem koji nije 1, morate to navesti pomoću atributa početak označiti
Sljedeći primjer prikazuje numerirani popis s velikim rimskim brojevima i početnom vrijednošću XLIX:Možete započeti numeriranje s atributom vrijednost koji se dodaje elementu
- koji upućuju na pojedinačne stavke popisa daju standardne oznake stavki popisa.
Parametar COMPACT je napisan bez vrijednosti i koristi se za upućivanje pregledniku da prikaže ovaj popis u kompaktnom formatu. Na primjer, font se može smanjiti ili udaljenost između redaka popisa itd.
Bilješka
Trenutno, prisutnost parametra COMPACT u oznaci
- ni na koji način ne utječe na prikaz popisa vodećih preglednika. Stoga je korištenje ovog parametra besmisleno, pogotovo jer njegovu upotrebu ne preporučuje HTML 4.0 specifikacija.
Parametar TYPE može imati sljedeće vrijednosti: disk, krug i kvadrat. Ovaj parametar se koristi za prisilno pojavljivanje oznaka popisa. Točan tip markera ovisit će o korištenom pregledniku. Tipične opcije prikaza su sljedeće:
VRSTA = disk - markeri su prikazani popunjenim kružićima; VRSTA = krug - markeri se prikazuju otvorenim krugovima; VRSTA = kvadrat - markeri se prikazuju s popunjenim kvadratima. Primjer snimanja:
- .
Zadana vrijednost je TYPE = disk. Za ugniježđene popise s grafičkim oznakama, zadana postavka je disk na prvoj razini, krug na drugoj i kvadrat na trećoj i dalje. Upravo to se radi u najnovijim verzijama preglednika Netscape i Internet Explorer. Imajte na umu da drugi preglednici mogu drugačije prikazivati oznake. Na primjer, HTML 4.0 specifikacija navodi kvadratni obris za izgled markera koji se prikazuje kada je TYPE = kvadrat.
Parametar TYPE s istim vrijednostima može se koristiti za određivanje vrste markera za pojedinačne stavke popisa. Za to je dopušteno navesti parametar TYPE s odgovarajućom vrijednošću u oznaci stavke popisa
- .
Praktično, principi prikazivanja stavki popisa s grafičkim oznakama mogu se primijeniti na sličan način kao i numerirani popis. Ali s obzirom na to da imamo posla s nabrajanjem, postoje neke značajke o kojima će biti riječi u nastavku.
Numeracija popisa
Dopušteno je započeti popis s bilo kojeg broja; u tu svrhu koristi se startni atribut elementa
- ili vrijednost elementa
Primjer 11.1 pruža HTML za dodavanje popisa s grafičkim oznakama na web stranicu.
Primjer 11.1. Napravite popis s grafičkim oznakama
Rezultat ovog primjera prikazan je na sl. 11.1.
Riža. 11.1. Prikaz popisa s oznakama
Obratite pažnju na padding na vrhu, dnu i lijevo od popisa. Takve se uvlake dodaju automatski.
Oznake mogu biti tri vrste: krug (zadano), krug i kvadrat. Atribut type oznake koristi se za odabir stila markera.
- ... Dopuštene vrijednosti su date u tablici. 11.1
| Vrsta popisa | HTML kod | Primjer |
|---|---|---|
| Popis s naznakama u obliku kruga | ||
| Popis s naznakama u obliku kruga | ||
| Popis s kvadratnim oznakama |
Izgled markera može se neznatno razlikovati u različitim preglednicima, kao i pri promjeni fonta i veličine teksta.
Izrada popisa s kvadratnim markerima prikazana je u primjeru 11.2.
Primjer 11.2. Vrsta markera
Promjena uvjerenja
Rezultat ovog primjera prikazan je na sl. 11.2.
Jedna od vrsta popisa implementiranih u HTML-u je popis s grafičkim oznakama. Inače se popisi ovog tipa nazivaju neuređeni ili neuređeni. Potonji naziv često se koristi kao službeni prijevod naziva odgovarajuće oznake.
- , uz pomoć kojih se popisi ovog tipa organiziraju u HTML dokumente (UL - Unordered List, unordered list).
Popis s grafičkim oznakama koristi posebne znakove koji se nazivaju metak popisa (često se nazivaju bullets, što je službeni izgovor engleskog izraza bullet) za isticanje svojih stavki. Tip markera popisa određuje preglednik, a prilikom izrade ugniježđenih popisa preglednici će automatski diverzificirati izgled markera na različitim razinama ugniježđenja.
Oznake i
Da biste izradili popis s grafičkim oznakama, morate koristiti oznaku spremnika unutar koje se nalaze svi elementi popisa. Oznake popisa za otvaranje i zatvaranje pružaju izvore reda prije i poslije popisa, odvajajući tako popis od glavnog sadržaja dokumenta, tako da ovdje nema potrebe koristiti oznake odlomaka.
.
Svaka stavka popisa mora početi oznakom
