Numerisane liste su skup elemenata sa njihovim serijskim brojevima. Vrsta i tip numeracije zavise od parametara elementa
- , koji se koristi za kreiranje liste. Sljedeće vrijednosti mogu poslužiti kao elementi numeracije:
- arapski brojevi (1, 2, 3, ...);
- Arapski brojevi sa početnom nulom za brojeve 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, ...);
- armenska numeracija;
- Gruzijsko numerisanje.
- . Vrijednost je bilo koji pozitivan cijeli broj. Nije bitno koja je vrsta numeracije postavljena, čak i ako se latinična slova koriste kao lista. Ako se atributi start i value istovremeno primjenjuju na listu, onda potonji ima prednost i numeriranje se prikazuje od broja specificiranog vrijednosti, kao što je prikazano u primjeru 1.
Primjer 1: Promjena numeracije liste
Liste - Trebali biste dobro voditi računa o svom radnom mjestu.
- Podesite osvetljenje u prostoriji tako da se izvor svetlosti nalazi sa strane ili iza operatera.
- Kako biste izbjegli medicinske komplikacije, preporučuje se odabir stolice s mekim sjedištem.
Prvi element liste u ovom primjeru počinje rimskim brojem IV, pošto je naveden atribut start="4", zatim dolazi broj V, a posljednji element izlazi van reda i dodjeljuje mu se broj X (slika 1).
Rice. 1. Rimski brojevi u listi
Pisanje brojeva
Po defaultu, numerisana lista ima određeni izgled: prvo je broj, zatim tačka, a nakon toga se prikazuje tekst odvojen razmakom. Ovaj oblik pisanja je vizualan i zgodan, ali neki programeri više vole da vide drugačiji način dizajniranja numeracije lista. Naime, tako da umjesto tačke postoji zagrada koja zatvara, kao što je prikazano na sl. 2 ili nešto slično.
Rice. 2. Prikaz numerisane liste sa zagradama
Stilovi vam omogućavaju da promijenite tip numeriranja liste koristeći svojstva sadržaja i brojača. Prvo, ol selektor treba postaviti na poništavanje brojača : item , ovo je neophodno kako bi numeriranje u svakoj novoj listi počelo iznova. U suprotnom, numerisanje će se nastaviti i umesto 1,2,3 videćete 5,6,7. Vrijednost stavke je jedinstveni identifikator brojača; sami ga biramo. Zatim morate sakriti originalne markere kroz svojstvo stila lista-style-type sa vrijednošću ništa.
Svojstvo content obično radi u sprezi sa pseudoelementima ::after i ::before. Dakle, konstrukcija li::before kaže da se neki sadržaj mora dodati prije svakog elementa liste (primjer 2).
Primjer 2. Kreiranje vlastite numeracije
Li::before (sadržaj: brojač(stavka) ") "; /* Dodajte zagradu brojevima */ counter-increment: item; /* Podesite ime brojača */ )
Svojstvo sadržaja sa brojačem vrednosti(stavkom) prikazuje broj; Dodavanjem zagrade, kao što je prikazano u ovom primjeru, dobijamo traženu vrstu numeracije. kontrainkrement je potreban za povećanje broja liste za jedan. Imajte na umu da se isti identifikator, pod nazivom item , koristi u cijelom. Konačni kod je prikazan u primjeru 3.
Primjer 3: Promjena prikaza liste
Liste - Prvo
- Sekunda
- Treće
- Četvrto
Koristeći gornju metodu, možete napraviti bilo koju vrstu numerirane liste, na primjer, staviti broj u uglaste zagrade, u ovom slučaju će se samo jedan red promijeniti u stilovima.
Sadržaj: "[" counter(item) "] ";
Spisak sa ruskim slovima
Postoji numerisana lista sa latiničnim slovima, ali nema ruskih slova za listu. Mogu se dodati umjetno koristeći gornju tehniku. Pošto se numerisanje vrši preko stilova, sama lista ostaje originalna, dodaje joj se samo odabrana klasa, nazovimo je ćirilica (primer 4).
Primjer 4: Kod za kreiranje liste
- Jedan
- Dva
- Tri
Dodavanje slova se vrši pomoću pseudoelementa ::before i svojstva content. Pošto svaki red mora imati svoje slovo, koristićemo pseudo-klasu :nth-child(1) sa brojem slova napisanim 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: Upotreba pseudo-class:nth-child
Ćirilica li:nth-child(1)::before (sadržaj: "a)"; ) .cyrilic li:nth-child(2)::before (sadržaj: "b)"; ) .cyrilic li:nth-child(3)::before (sadržaj: "na)"; )
U ovom primjeru, svako slovo je praćeno zagradama, sva slova su mala. Možete definisati sopstveni tip numerisanja liste, na primer može da sadrži velika slova sa tačkom, sa jednom ili dve zagrade ili samo slova. Za razliku od standardnog numerisanja, mi smo slobodni da radimo šta god želimo. Lista od deset slova trebala bi biti dovoljna za gotovo sve situacije, ali ako se to odjednom pokaže nedovoljno, ništa nas ne sprječava da proširimo listu i uključimo barem sva slova ruske abecede.
Konačno podešavamo poravnanje i poziciju slova, opciono određujemo veličinu fonta, boju i druge parametre (primjer 6).
Primjer 6. Lista sa ruskim slovima
Lista - Borsch
- Kotleti od štuke
- Kulebyaka
- Pečurke u pavlaci
- Palačinke sa kavijarom
- Kvass
Rezultat ovog primjera prikazan je na sl. 3.
Lista za nabrajanje se definiše dodavanjem malog znaka za nabrajanje, obično u obliku popunjenog kruga, ispred svake stavke liste. Sama lista se formira pomoću kontejnera
- , a svaka stavka liste počinje oznakom
- kao što je prikazano ispod.
- Prva tačka
- Druga tačka
- Treća tačka
Lista mora sadržavati završnu oznaku
Iako nije potrebno, uvijek preporučujemo da ga dodate u jasno odvojene stavke liste.
- Cheburashka
- Krokodil Gena
- Shapoklyak
- Rat Larisa
- Prvo
- Sekunda
- Treće
- Prvo
- Sekunda
- Treće
- Prvo
- Sekunda
- Treće
- promjena vjerske vjere (opcionalno: budizam, konfucijanizam, hinduizam). Posebna ponuda - Judaizam i Islam zajedno;
- promjena vjerovanja u nepogrešivost omiljene stranke;
- vjerovanje da vanzemaljci postoje;
- preferencija političkog sistema kao najboljeg u svojoj vrsti (na izbor: feudalizam, socijalizam, komunizam, kapitalizam).
- (LI - Stavka liste, element liste). Tag
- ne zahtijeva odgovarajuću završnu oznaku, iako njeno prisustvo u principu nije zabranjeno. Preglednici obično započinju svaku novu stavku liste u novom redu kada prikazuju dokument.
Dostavljene informacije su dovoljne za izradu osnovne liste sa nabrajanjem. Hajde da damo primer HTML dokumenta koji koristi listu sa nabrajanjem, čiji je prikaz od strane pretraživača prikazan na Sl. 2.1.
Primjer liste s oznakama horoskopski znakovi:
- Ovan
- Bik
- Blizanci
- Djevica
- Vage
- Škorpion
- Strijelac
- Jarac
- Vodolija
- Riba
Rice. 2.1. Prikaz liste sa nabrajanjem u pretraživaču
Imajte na umu da pored elemenata liste označenih oznakom
- , mogu biti prisutni i drugi HTML elementi. U gornjem primjeru, jedan od ovih elemenata je običan tekst, koji nije stavka liste, već služi kao njen naslov.
Bilješka
Neki udžbenici o HTML jeziku navode da se oznaka kontejnera treba koristiti za postavljanje naslova liste
(LH - Zaglavlje liste, zaglavlje liste). Ovu oznaku trenutno ne prepoznaju nijedan uobičajeni pretraživač i nije dio HTML specifikacije. Stoga njegova upotreba postaje besmislena, iako neće dovesti do grešaka. U oznaci
- mogu se specificirati dva parametra: COMPACT i TYPE.
- .
Primjer unosa:
- .
Bilješka
Preglednici različito tumače specifikaciju tipa metka za pojedinačnu stavku liste. Netscape pretraživač mijenja izgled markera za ovaj i sve naredne dok se ne naiđe na sljedeću redefinaciju izgleda markera. Internet Explorer mijenja izgled markera samo za ovaj element.
Markeri grafičke liste
Možete koristiti grafičke slike kao oznake liste, što se široko koristi za kreiranje atraktivnih, dobro dizajniranih HTML dokumenata. Zapravo, ovu mogućnost ne pruža direktno HTML jezik, već je implementirana donekle umjetno. To ne znači da to nije preporučljivo ili za osudu, već samo da se ovdje neće koristiti posebne konstrukcije HTML jezika.
Da biste razumjeli ideju, morate razumjeti mehanizam za implementaciju lista na HTML stranicama. Ispostavilo se da je oznaka liste
- (kao, u stvari, liste tagova drugih tipova, o kojima se govori u nastavku) obavlja jedan zadatak - govori pretraživaču da sve informacije koje se nalaze nakon ove oznake trebaju biti prikazane pomaknute udesno (uvučeno) za određeni iznos. Oznake
- , koji ukazuju na pojedinačne stavke liste, daju standardne markere stavki liste.
Ako treba da napravimo listu sa grafičkim markerima, onda možemo i bez oznaka
- . Biće dovoljno da umetnete željenu grafičku sliku ispred svakog elementa liste. Jedini problem koji treba riješiti je razdvajanje elemenata liste jedan od drugog. Za ovo možete koristiti oznake pasusa
Ili prisilno prebacivanje reda
. Primjer implementacije liste sa grafičkim markerima, čiji je prikaz prikazan na Sl. 2.2 je prikazano ispod:koji će biti prenošen samo jednom. Veličine datoteke male slike su također izuzetno male.
Bilješka
Metode za kreiranje lista sa grafičkim oznakama razmatraju se redom u Poglavlju 8.
HTML podržava tri različite vrste lista, od kojih svaka ima svoje tipove lista:
Numerisane liste
U numerisanu listu, pretraživač automatski ubacuje brojeve elemenata po redosledu, počevši od određene vrednosti (obično 1). Ovo vam omogućava da ubacite i izbrišete stavke liste bez ometanja numeracije, budući da će preostali brojevi biti automatski ponovo izračunati.
Numerisane liste se kreiraju korišćenjem blok elementa
Tag- element 1
- element 2
- element 3
Numerirane stavke liste moraju sadržavati više stavki liste, kao što je prikazano u sljedećem primjeru:
Primjer: Numerirana lista
- Probajte sami"
Korak po korak instrukcije
- Uzmi ključ
- Umetnite ključ u bravu
- Okrenite ključ za dva okreta
- Izvadi ključ iz brave
- Otvoriti vrata
Korak po korak instrukcije
- Uzmi ključ
- Umetnite ključ u bravu
- Okrenite ključ za dva okreta
- Izvadi ključ iz brave
- Otvoriti 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 po defaultu).
- na sljedeći način:
-
U ovom slučaju, sekvencijalno numerisanje liste će biti prekinuto i od ove tačke numerisanje će početi ponovo, u ovom slučaju od sedam.
Primjer upotrebe atributa vrijednost tag
U ovom primjeru, "Prva stavka liste" bi bila broj 1, "Stavka druge liste" bi bila broj 7, a "Treća stavka liste" bi bila broj 8.
Formatiranje numerisanih lista pomoću CSS-a
Za promjenu brojeva liste trebate koristiti svojstvo tip-stil liste CSS stilovi:
- . Pretraživač uvlači svaku stavku liste i automatski prikazuje znakove za nabrajanje.
- Prva tačka
- Druga tačka
- Treća tačka
- Nije potrebno postavljati samo tekst, prihvatljivo je postaviti bilo koji element streaming sadržaja (linkove, pasuse, slike itd.)
- Dozvoljeno je kreiranje ugniježđene liste ili liste drugog nivoa. Da biste ugnijezdili listu, opišite novu listu unutar elementa
- već postojeću listu. Kada ugnijezdite jednu listu za nabrajanje u drugu, pretraživač automatski mijenja stil za nabrajanje za listu drugog nivoa. Bilo koja lista može biti ugniježđena u drugu. Sljedeći primjer pokazuje strukturu liste s nabrajanjem ugniježđene unutar druge stavke numerirane liste.
- Probajte sami"
- ponedjeljak
- Pošalji poštu
- Posjeta uredniku
- Odabir teme
- Dekorativni dizajn
- Završni izvještaj
- Večernje pregledavanje poruka
- utorak
- Revidirati raspored
- Pošaljite slike
- srijeda...
- ponedjeljak
- Pošalji poštu
- Posjeta uredniku
- Odabir teme
- Dekorativni dizajn
- Završni izvještaj
- Večernje pregledavanje poruka
- utorak
- Revidirati raspored
- Pošaljite slike
- srijeda...
- Probajte sami"
- Kafa
- Kafa
- Kafa
- Kafa
- Kafa
- Mlijeko
- Kafa
- Mlijeko
- Kafa
- Mlijeko
- Kafa
- Mlijeko
- Probajte sami"
- Bik
- Blizanci
- Ovan
- Bik
- Blizanci
- (od engleskog Definition Term - definirana riječ, pojam) i
- (od engleskog Definition Description - opis pojma koji se definiše).
- Prvi mandat
- Opis prvog pojma
- Drugi mandat
- Opis drugog termina
- Probajte sami"
- World Wide Web
- - sa engleskog World Wide Web (WWW) je distribuirani sistem koji omogućava pristup povezanim dokumentima koji se nalaze na različitim računarima povezanim na Internet.
- Internet
- — skup mreža koje koriste jedan protokol razmjene za prijenos informacija.
- Website
- - skup pojedinačnih web stranica koje su međusobno povezane linkovima i jedinstvenog dizajna.
- Badminton
- Bejzbol
- Chomolungma
- Chogori
- Kanchenjunga
- Summit Plummet
- Tantrum Alley
- Insano
- Filipinsko more
- Arabijsko more
- koraljno more
- Crveni
- Zeleno
- Plava
Stilovi numerisane liste
Primjer Značenje Opis a, b, c niži alfa Mala slova A, B, C gornji alfa Velika slova i, ii, iii nižerimski Rimski brojevi malim slovima I, II, III gornji roman Rimski brojevi velikim slovima Primjer: Primjena CSS svojstva tip-stil liste
Liste sa nabrajanjem
Liste sa oznakama su u suštini slične numerisanim listama, samo što ne sadrže sekvencijalno numerisanje stavki. Liste sa oznakama se kreiraju pomoću elementa bloka
TagU sljedećem primjeru možete vidjeti da se, prema zadanim postavkama, mali marker u obliku popunjenog kruga dodaje prije svake stavke liste:
Unutar oznake
Ugniježđene liste
Bilo koja lista može biti ugniježđena u drugu. Unutar elementaPrimjer: Ugniježđene liste
Formatiranje lista za nabrajanje
Da biste promijenili izgled markera liste, trebali biste koristiti svojstvo tip-stil liste CSS stilovi:
Sljedeći primjer pokazuje različite stilove lista sa nabrajanjem:
Primjer: Stilovi liste za nabrajanje
disk:
krug:
Kvadrat:
ništa:
Grafički markeri.
U HTML-u je moguće kreirati listu sa grafičkim markerima. Jedno je kada su markeri liste standardni krugovi ili kvadrati, a sasvim drugo kada programer sam bira marker u skladu sa dizajnom stranice. Kako bi stavke na listi bile lijepe, često se koriste male slike.
Za zamjenu običnog markera grafičkim, zamijenite svojstvo tip-stil liste po nekretnini slika u stilu liste i navedite URL slike:Primjer: Grafički markeri
Znakovi zodijaka
Znakovi zodijaka
Liste definicija (opisa)
Liste definicija su vrlo korisne za kreiranje, na primjer, vašeg ličnog rječnika pojmova. Svaka stavka liste definicija ima dva dijela: pojam i njegovu definiciju.
Stavljate cijelu listu u element
Liste definicija se često koriste u naučnim, tehničkim i obrazovnim publikacijama, koristeći ih za sastavljanje glosara, rječnika, priručnika itd.Opća struktura liste opisa je sljedeća:
Sljedeći primjer pokazuje jednu moguću upotrebu liste definicija:
Primjer: Lista definicija
World Wide Web - sa engleskog. World Wide Web (WWW) je distribuirani sistem koji omogućava pristup povezanim dokumentima koji se nalaze na različitim računarima povezanim na Internet. Internet je skup mreža koje koriste jedan protokol razmjene za prijenos informacija. Web stranica je skup pojedinačnih web stranica koje su međusobno povezane linkovima i jedinstvenim dizajnom.
Podrazumevano, tekst pojma je pritisnut na levu ivicu prozora pretraživača, a opis pojma se nalazi ispod i pomera udesno.
Dobar dan!
U ovom članku ćete naučiti o svim mogućnostima lista, razumjeti kako napraviti numerisanu listu i savladati oznake koje će vam pomoći da jednostavnu listu s nabrajanjem pretvorite u zanimljiviju i uočljiviju s proizvoljnim oznakama. Nakon završetka lekcije, imat ćete razumijevanje o tome gdje se koriste liste i pod kojim okolnostima se mogu koristiti.
Ovaj članak je treći u ovom kratkom kursu o osnovama HTML-a. Prije čitanja ove lekcije, preporučujem da prođete prethodne dvije:
Članak je tek počeo, a već možete primijetiti korištenje standardne liste s nabrajanjem. Na mojoj web stranici to izgleda prilično jednostavno: lijevo je mala uvlaka s linijom i kvadratnim markerom. Kasnije u članku ćemo detaljno pogledati koje vrste markera postoje, kako napraviti brojeve, a također i kako napraviti svoj marker.
U svakom dijelu članka, kreiranje određenih lista će biti popraćeno detaljnim objašnjenjima za umetanje određene liste.
1. Liste sa nabrajanjem u HTML-u
Ova vrsta liste se koristi za navođenje u tekstu skupa elemenata sa sličnim značenjima. Ovo može biti lista linkova koji se odnose na istu temu, detaljno objašnjenje za pojedine dijelove teksta. Ali hajde da vidimo kako izgledaju liste sa nabrajanjem 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 se pojavljuje kao popunjen krug u pretraživaču. U HTML-u postoji nekoliko tipova markera: popunjeni krug, prazan krug i kvadrat. Ne zahtijevaju nikakve CSS ili slike treće strane:
1.2 Marker liste u obliku praznog kruga
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 postavili ga na našu listu s nabrajanjem:
<html > <glava > <naslov > Primjer liste s nabrajanjem s praznim markerom kruga</naslov> </head> <tijelo > <p> zvjezdice:</p> <ul type = "krug" > <li > Sirius</li> <li > Arcturus</li> <li > Pollux</li> <li > Betelgeuse</li> <li > Ned</li> </ul> </tijelo> </html> Hajde odmah da vidimo kako će ovaj kod izgledati u pretraživaču:
Rice. 1.2. Prikaz markera liste kao kruga u pretraživaču1.3 Marker liste u obliku kvadrata
Pogledajmo i posljednji primjer sa kvadratnim markerom za HTML listu:
Obratite pažnju na marker, postao je kvadratan:
Rice. 1.3. Prikaz markera liste kao kvadrata u pretraživačuVažna napomena: Ova metoda se više ne koristi za kreiranje stilova za liste sa nabrajanjem. Postoji jasna razlika između CSS-a (pročitajte šta je CSS) i HTML-a. HTML služi za označavanje, a CSS za stvaranje atraktivnog izgleda.
Kôd koji sadrži ovaj atribut kada specificirate trenutnu vrstu dokumenta kao HTML5 (""), će dati grešku tokom validacije. Ako niste čuli šta je validacija, onda je ovo mjesto za vas.
Greška će biti sljedeća:
Rice. 1.4. Greška na validatoru kada se koristi atribut "type" listeSredili smo liste sa nabrajanjem. Pređimo sada na numerisane liste, a zatim razmotrimo 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 se numerišu. Ovo je korisno kada trebate numerisati veliku listu. Ručno će vam trebati dosta vremena, a i dalje možete biti zbunjeni. Brojčana lista je specificirana pomoću oznake. Kako to izgleda u praksi:
Primjer numerisane liste:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html > <glava > <naslov > Primjer standardne numerisane liste</naslov> </head> <tijelo > <p> Od 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 standardnim postavkama pretraživača:
Rice. 2.1. Numerisana lista u pretraživaču sa standardnim postavkamaKao i njegov prethodnik (bullet lista), ima svoje stilove za prikazivanje brojeva. Redovno numerisanje nije jedina vrsta nabrajanja za numerisanu listu u HTML-u.
2.1 Standardne oznake za numerisane liste
Ovdje imamo izbor ne između tri vrste markera, već od pet:
Ime markera vrijednost atributa "type". Primjer liste Markeri u obliku arapskih brojeva 1 Markeri u obliku malih latiničnih slova a Markeri u obliku velikih latiničnih slova A Oznake za male rimske brojeve i Oznake velikih rimskih brojeva I 2.2 Vlastito numeriranje u HTML listi
Pored uobičajenog izlaza numerisane liste, takođe možemo započeti naše numerisanje od bilo kog broja. Da biste to učinili, morate postaviti dodatni atribut "start" . Ovo numerisanje radi na svim tipovima markera 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 > Prilagođeno numerisanje za numerisanu listu</naslov> </head> <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> Evo kako će izgledati na stvarnoj stranici:
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.
Pa, 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 za pravljenje menija. Ovaj meni se najčešće čini ili padajućim menijem nadole (lekcija na) ili levo ili desno padajući meni. Takvi meniji vam omogućavaju da pohranite druge elemente 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 Nested Bullet List</naslov> </head> <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
- ). Lista na više nivoa sa Citroen modelima pojavila se sa drugim oznakama. Glavna lista ima popunjene oznake, a lista 2. nivoa ima prazne krugove. Ali, kao što se sjećate, pomoću atributa "type" možemo redefinirati markere (bolje je postaviti ).
Ali možemo kombinovati višeslojne liste sa numerisanim i označenim listama kao što je ovaj:
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 liste i liste na više nivoa u HTML-u</naslov> </head> <tijelo > <ul > <li > Prva grupa tulipana<ol > <li > Prvi razred<ul > <li > Jednostavni rani tulipani</li> </ul> </li> <li > Druga klasa<ul > <li > Terry tulipani</li> </ul> </li> </ol> </li> </ul> </tijelo> </html> U gornjem primjeru imamo dvostruko ugniježđenje (2 nivoa). Prvo, uključena je lista dvije klase tulipana; imamo je numerisanu. Zatim je lista sa nabrajanjem ugniježđena unutar svake od stavki u numerisanoj listi.
Pogledajmo kako to izgleda u pretraživaču:
Rice. 3.2. Primer numerisane liste na više nivoa u listi sa nabrajanjem u pretraživaču4. Korisni materijali na HTML listama
Ovo je informacija koja zahtijeva razumijevanje CSS svojstava. Da biste to učinili, preporučujem proučavanje sljedećih lekcija: . Svi primjeri će biti odmah s izvornim kodom i podijeljeni 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 horizontalnog menija. Vrlo je lako uraditi:
4.2 Kako napraviti HTML listu bez ikone
Svojstvo list-style-type u CSS-u je odgovorno za ovo (više detalja):
4.3 Kako centrirati listu u HTML-u
Stavka liste je blok element, 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
Dovoljno je samo jedno CSS svojstvo, list-style-image. Unutar url-a navedite adresu prije ikone. Samo želim napomenuti da je bolje odmah odabrati malu sliku, jer visina linije liste ovisi o tome:
4.5 Lista za nabrajanje HTML-om svoj bullet
U tom slučaju morate 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 u nekoliko kolona
Da bismo napravili listu u nekoliko kolona, koristićemo svojstvo CSS column-count (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 liste da vidite podjelu na više kolona:
5. Vježbajte rad sa listama
U videu ispod možete vidjeti sav rad sa HTML listama u praksi:
Da biste konsolidirali primljene informacije, preporučujem da sve korake izvršite ručno. Isprobajte različite oznake za liste, kreirajte numerisane liste, a zatim pređite na višeslojne (ugniježđene) liste i eksperimentirajte s njima.
Ovdje završavamo sa listama i prelazimo na sljedeću lekciju o slikama.
Vježbajte više!
Lekcija 3. Kako napraviti listu u HTML-u 4.91 /5 (98.26%) 23 glasa
Ovdje: upišite – navedite simbole:
Ako želite da lista počinje brojem koji nije 1, trebali biste to navesti koristeći atribut start tag
Sljedeći primjer prikazuje numerisanu listu s velikim rimskim brojevima i početnom vrijednošću XLIX:Numeriranje se također može započeti korištenjem atributa vrijednost, koji se dodaje elementu
- , koji ukazuju na pojedinačne stavke liste, daju standardne markere stavki liste.
Parametar COMPACT se piše bez vrijednosti i koristi se da bi se pretraživaču naznačilo da datu listu treba prikazati u kompaktnom obliku. Na primjer, može se smanjiti font ili razmak između redova liste, itd.
Bilješka
Trenutno, prisustvo parametra COMPACT u oznaci
- ni na koji način ne utiče na prikaz lista u vodećim pretraživačima. Stoga je korištenje ovog parametra besmisleno, pogotovo zato što 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 znakova za nabrajanje liste. Tačan tip markera zavisi od pretraživača koji koristite. Tipične opcije prikaza su sljedeće:
TIP = disk - markeri se prikazuju kao popunjeni krugovi; TIP = krug - markeri se prikazuju kao otvoreni krugovi; TIP = kvadrat - markeri se prikazuju kao popunjeni kvadrati. Primjer unosa:
- .
Zadana vrijednost je TYPE = disk. Za ugniježđene liste sa nabrajanjem, zadana vrijednost je disk na prvom nivou, krug na drugom nivou, kvadrat na trećem nivou i dalje. To je upravo ono što se radi u najnovijim verzijama Netscape i Internet Explorer pretraživača. Imajte na umu da drugi pretraživači mogu drugačije prikazati markere. Na primjer, u specifikaciji HTML 4.0, tip markera koji se prikazuje kada je TYPE = square specificiran je kao obris kvadrata.
Parametar TYPE sa istim vrijednostima može se koristiti za određivanje tipa markera za pojedinačne elemente liste. Da biste to učinili, dozvoljeno je navesti parametar TYPE s odgovarajućom vrijednošću u oznaci elementa liste
- .
Sa praktične tačke gledišta, principi prikazivanja stavki u listi sa nabrajanjem mogu se primeniti na sličan način kao na numerisanoj listi. Ali s obzirom na to da se radi o nabrajanju, postoje neke karakteristike o kojima će se dalje govoriti.
Numeracija liste
Dozvoljeno je započeti listu od bilo kojeg broja; za ovu svrhu se koristi početni atribut elementa
- ili vrijednost elementa
Primjer 11.1 prikazuje HTML kod za dodavanje liste s nabrajanjem na web stranicu.
Primjer 11.1. Kreirajte listu sa nabrajanjem
Rezultat ovog primjera prikazan je 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 automatski dodaju.
Markeri mogu imati jedan od tri oblika: krug (podrazumevano), krug i kvadrat. Da biste odabrali stil markera, koristite atribut tipa oznake
- . Prihvatljive vrijednosti su date u tabeli. 11.1
| Vrsta liste | HTML kod | Primjer |
|---|---|---|
| Lista sa kružićima | ||
| Lista sa kružićima | ||
| Lista sa kvadratnim naznacima |
Izgled markera može se neznatno razlikovati u različitim pretraživačima, kao i prilikom promjene fonta i veličine teksta.
Kreiranje liste sa kvadratnim znakovima je prikazano u primjeru 11.2.
Primjer 11.2. Vrsta markera
Promjena vjerovanja
Rezultat ovog primjera prikazan je na sl. 11.2.
Jedna od vrsta lista implementiranih u HTML-u je lista sa nabrajanjem. Inače, liste ovog tipa nazivaju se nenumerisanim ili neuređenim. Prezime se često koristi kao formalni prijevod imena odgovarajuće oznake
- , uz pomoć kojih se liste ovog tipa organizuju u HTML dokumente (UL - Unordered List, nesređena lista).
U listi za nabrajanje, specijalni znakovi koji se nazivaju markeri liste koriste se za isticanje njenih elemenata (često se nazivaju bullets, što je formalni izgovor engleskog izraza bullet). Izgled markera liste određuje pretraživač, a prilikom kreiranja ugniježđenih lista, pretraživači automatski diverzificiraju izgled markera na različitim nivoima ugniježđenja.
Oznake I
Da biste kreirali listu sa nabrajanjem, potrebno je da koristite oznaku kontejnera, unutar koje se nalaze svi elementi liste. Oznake za otvaranje i zatvaranje liste obezbeđuju prelom reda pre i posle liste, čime se lista odvaja od glavnog sadržaja dokumenta, tako da nema potrebe da ovde koristite oznake pasusa
.
Svaki element liste mora početi oznakom
