Popisi s oznakama u html i css. Postavljanje oznake popisa na različite načine

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

  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:

  • disk - markeri u obliku ispunjenog kruga;
  • krug - markeri u obliku otvorenog kruga;
  • kvadratni - kvadratni markeri.

  Primjer 1. Promjena izgleda markera

  • Sepulki
  • Sepulcaria
  • Sepulenie

  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

• 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

  • 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

  • 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

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

  

  Danas praktički ne postoji stranica koja ne koristi HTML liste (

  predstavlja uređenu listu,
  - nesređena lista). U ovom vodiču pokazat ću vam 8 sjajnih načina da obične dosadne html liste učinite privlačnima. Samo ćemo dodati nekoliko jednostavnih CSS tehnika i naši popisi ne samo da će izgledati sjajno, već i nekoliko dodatnih značajki.

  Sada pogledajte demo da vidite što ćemo stvoriti.

  Izgleda puno bolje, zar ne? I vi također možete kreirati takve popise jednostavnim CSS kodom. Želite li znati kako? Nastavi čitati!

  Popis br. 1: Jednostavan navigacijski sustav

  

  Najčešće se pri izradi navigacijskog izbornika koriste popisi. Kod za ovaj HTML/CSS primjer omogućuje vam stvaranje jednostavnog, čak i pomalo skromnog, ali atraktivnog navigacijskog sustava.

  • Dom
  • Blog
  • Oko
  • Kontakt

  / * LIST # 1 * / # list1 () # list1 ul (list-style: nema; text-align: center; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 10px 0; ) # list1 ul li (prikaz: inline; transformacija teksta: velika slova; padding: 0 10px; razmak između slova: 10px;) # list1 ul li a (dekoracija teksta: nema; boja: #eee;) # list1 ul li a: lebdjeti (dekoracija teksta: podcrtati;)

  Kontrolni popis # 2: Korištenje drugog fonta za numeriranje

  

  Problem s korištenjem popisa je što se on stapa s tekstom. A brojevi su uvijek iste boje kao i tekst.
  Međutim, dodajte malo stylinga i zaboravit ćete na gornja ograničenja i vaše će liste postati puno privlačnije. Evo kako se to radi:

  Nizozemska je država u...

  Sjedinjene Američke Države je savezni ustavni ...

  Filipini službeno poznata kao Republika...

  Ujedinjeno Kraljevstvo Velike Britanije i...

  / * LIST # 2 * / # list2 (širina: 320px;) # list2 ol (font-style: italic; font-family: Georgia, Times, serif; font-size: 24px; boja: # bfe1f1;) # list2 ol li () # list2 ol li p (padding: 8px; font-style: normal; font-family: Arial; font-size: 13px; color: #eee; border-left: 1px solid # 999;) # list2 ol li p em (zaslon: blok;)

  Popis br. 3: Markeri slike

  

  Možete jednostavno promijeniti izgled neuređenih oznaka popisa navođenjem jedne od standardnih vrijednosti, ali također možete koristiti slike kao oznake. Ovo rješenje pomoći će vam da vaši popisi budu originalniji. A evo i koda:

  • Java
  • .NETO

  / * LIST # 3 * / # list3 () # list3 ul (list-style-image: url ("../ images / arrow.png"); boja: #eee; veličina fonta: 18px;) # list3 ul li (visina linije: 30px;)

  Popis br. 4: u stilu iPhonea

  

  Ovaj popis je preuzet iz aplikacije iPhone Contacts, izgrađene pomoću CSS-a i jQueryja. Ovako izgledaju liste na iPhoneu. Vrlo atraktivno, zar ne? Želite li ovo na svojoj stranici?

  • Toronto 2004
  • Peking 2008
  • London 2012
  • Rio de Janeiro 2016

  / * LIST # 4 * / # list4 (širina: 320px; font-family: Georgia, Times, serif; font-size: 15px;) # list4 ul (list-style: none;) # list4 ul li () # list4 ul li a (prikaz: blok; dekoracija teksta: nema; boja: # 000000; boja pozadine: #FFFFFF; visina linije: 30px; stil dna: čvrsta; širina dna: 1px; granica- bottom-color: #CCCCCC; padding-left: 10px; kursor: pokazivač;) # list4 ul li a: lebdeti (boja: #FFFFFF; background-image: url (../ images / hover.png); background-repeat : repeat-x;) # list4 ul li a strong (margin-right: 10px;)

  Popis br. 5: Ugniježđeni popisi

  

  Ugniježđeni popisi mogu biti nevjerojatno korisni i izgledati lijepo. Modificiranjem treće tehnike (Marker slike) možemo stvoriti "prošireni popis". Naravno, ne bez pomoći jQueryja:

  1. Google
     1. Picasa
     2. Feedburner
     3. Youtube
  2. Microsoft
     1. Korporacija Corel
     2. Zignali
     3. ByteTaxi
  3. Yahoo!
     1. Xoopit
     2. BuzzTracker
     3. MyBlogLog

  / * LIST # 5 * / # list5 (boja: #eee;) # list5 ol (veličina fonta: 18px;) # list5 ol li () # list5 ol li ol (list-style-image: url (".. /images/nested.png "); padding: 5px 0 5px 18px; veličina fonta: 15px;) # list5 ol li ol li (boja: # bfe1f1; visina: 15px; margin-left: 10px;)

  Popis # 6: rimska numeracija + višeredni tip

  

  Prema zadanim postavkama, popis koristi standardno numeriranje (1, 2, 3, 4, itd.). Promjenom vrijednosti u CSS-u možete postaviti drugu vrstu numeriranja, na primjer, rimski.
  Također, prema zadanim postavkama, numeriranje i oznake se nalaze izvan popisa (odličan primjer za to je naš popis na broju 2). Ali ovo je popravljivo, samo trebate promijeniti vrijednost svojstva list-style-position u unutra.

  1. Lorem ipsum dolor sit amet, ...
     Fusce sit amet ...
  2. Aenean placerat lectus tristique ...
     Vivamus interdum ...
  3. Mauris eget sapien arcu, vitae ...
     Phasellus neque risus ...
  4. Phasellus feugiat lacus ...
     Duis rhoncus...

  / * LIST # 6 * / # list6 (familija fonta: "Trebuchet MS", "Lucida Grande", Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;) # list6 ol (tip-stil liste: gornji -roman; boja: #eee; veličina fonta: 14px; pozicija-stil liste: unutar;) # list6 ol li ()

  Popis #7: Linearni popis sa stavkama odvojenim zarezima

  

  Obično se popisi koriste za prikaz količine nečega i prikazuju se u traci. Ali što ako želite linearni popis? To se postiže promjenom vrijednosti svojstva prikaza u inline. Ali ako iznenada trebate ugraditi popis u tekst, tada bi prema pravilima odlomci popisa trebali biti odvojeni zarezom. Kako se to može postići? Ili, jednostavno, pomoću: elementa nakon simboličkog koda.

  • Prva inline stavka
  • Druga inline stavka
  • Treća inline stavka
  • Četvrta inline stavka

  / * LIST # 7 * / # list7 () # list7 ul (boja: #eee; veličina fonta: 18px; porodica fontova: Georgia, Times, serif;) # list7 ul li (display: inline;) # list7 ul li: poslije (sadržaj: ",";) # list7 ul li.last: poslije (sadržaj: ".";)

  Popis # 8: Rotirajući navigacijski izbornik

  

  Evo posljednje tehnike za koju je potreban CSS3 da bi radio (podržava samo najnoviji Firefox, Safari i Chrome). Kada zadržite pokazivač iznad jednog od elemenata bloka, uključuje se efekt - rotacija. Sigurno nije najprikladniji način, ali vrlo lijep.

  • Dom
  • Blog
  • Oko
  • Kontakt

  / * LIST # 8 * / # list8 () # list8 ul (list-style: none;) # list8 ul li (familija fonta: Georgia, serif, Times; veličina fonta: 18px;) # list8 ul li a ( zaslon: blok; širina: 300px; visina: 28px; boja pozadine: # 333; obrub lijevo: 5px čvrst # 222; obrub desno: 5px čvrst # 222; padding-lijevo: 10px; dekoracija teksta: nema; boja : # bfe1f1;) # list8 ul li a: lebdjeti (-moz-transform: rotirati (-5deg); -moz-box-shadow: 10px 10px 20px # 000000; -webkit-transform: rotirati (-5deg); -webkit -box-shadow: 10px 10px 20px # 000000; transformacija: rotirati (-5deg); box-shadow: 10px 10px 20px # 000000;)

  Zaključak

  Kao što možete vidjeti, stvarno je moguće stvoriti jedinstvene stvari iz običnog html popisa. A sve to radi CSS. Jako mi je drago ako ste naučili puno zanimljivih stvari za sebe.

  U html označnom jeziku postoje 3 vrste popisa - poredani (numerirani), neuređeni (nenumerirani) i popisi definicija.

  Za izradu takvog popisa potrebne su vam 2 vrste elemenata: 'ul' (kratica od neuređeni popis, odnosno neuređeni popis) i 'li' (stavka popisa). Sve što je napisano unutar 'li' označeno je markerom.

  Izgled takvog popisa može se kontrolirati određivanjem vrsta markera.

  Vrste markera

  Postoji poseban atribut tipa koji se postavlja na oba elementa popisa. Ovo je vaš tip markera. Ukupno postoje 3 vrste: krug, disk i kvadrat:

  - kvadratni
  - disk
  - krug

  Ovisno o tome gdje navesti vrstu markera, možete je promijeniti za cijeli popis ili za određeni element.

  Naručeni popis

  Za izradu popisa potrebna su vam i 2 elementa: 'ol' i 'li' (stavka popisa). Oznake se zamjenjuju točkastim brojevima. Primjer jednostavnog popisa:

  1. prvi element
  2. drugi element
  3. posljednji element

  Možete kontrolirati izgled uređenog popisa navodeći različite vrste numeriranja.

  Vrste numeriranja

  Postoji poseban atribut tipa koji se pojavljuje na elementu 'ol' ili 'li'. Ovo je vrsta vašeg popisa. Ukupno ima 5 vrsta:

  - Numeracija arapskim brojevima (1, 2, 3)
  - Numeracija velikim slovima (A, B, C)
  - Numeracija malim slovima (a, b, c)
  - Numeracija velikim rimskim brojevima (I, II, III)
  - Numeracija malim rimskim brojevima (i, ii, iii)
  - S kojom znamenkom započeti numeriranje

  Ovisno o tome gdje navesti vrstu numeriranja, možete je promijeniti za cijeli popis ili za određeni element.

  Popis definicija

  Za rječničke natuknice izrađen je popis definicija.

  Postoji uobičajeni spremnik 'dl'. Unutar njega su 'dt' (definicijski termin) i 'dd' (opis definicije). Najjednostavniji primjer:

  Odjel za marketing

  Ovaj odjel se bavi promocijom roba i usluga

  Financijski odjel

  Ovaj odjel se bavi svim financijskim transakcijama

  Svi elementi svih lista su blokirani. Ali unutar elementa 'dt' možete staviti samo inline elemente. Možete staviti što god želite u elemente 'dd' i 'li'. Ovdje dolaze ugniježđene liste.

  Ugniježđeni (mješoviti popisi)

  To su višerazinski popisi, unutar kojih postoji hijerarhija. Takvi se popisi često koriste pri izradi karte web mjesta. Primjer:

  Mješoviti popis

  VIJESTI DANA

  Danas kiša

  Kiša će padati cijeli dan

  VIJESTI NOĆI

  Noću će padati kiša

  Sutra počinje novi dan

  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 pregledniku

  1.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 pregledniku

  1.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 pregledniku

  Važ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" popisa

  Shvatili 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 postavkama

  Kao 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 popisu

  Na 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-u

  Napravili 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 pregledniku

  4. Korisni resursi za HTML liste

  Sadrži informacije koje zahtijevaju razumijevanje CSS svojstava. Da biste to učinili, preporučujem vam da proučite sljedeće lekcije:. Svi ć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). Tada 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:

  Članak predstavlja nekoliko načina koji vam omogućuju postavljanje određene oznake za neuređeni popis, kao i njihove prednosti i nedostatke.

  Ako analizirate bilo koju stranicu, možete pronaći činjenicu da sadržaj vrlo često sadrži popise raznih vrsta: jelovnike, popis proizvoda itd. U HTML kodu oznaka je odgovorna za numerirani popis, a oznaka s naznakom -.

  Također je vrijedno napomenuti činjenicu da su u praksi popisi s grafičkim oznakama mnogo češći, ali imaju jedan mali nedostatak. Oznaka na popisu se prikazuje drugačije ovisno o pregledniku koji koristite. Za ozbiljnog dizajnera to je problem.

  Da biste uklonili ovaj negativni učinak, morate otkazati prikaz markera pomoću svojstva stila popisa:

  ol, ul (stil liste: nema;)

  Ovdje počinje formiranje popisa s jedinstvenim oznakama i ikonama. U nastavku su navedeni najčešći načini predstavljanja ikona stavki popisa koje su jedinstvene i iste u svim preglednicima.

  Markeri kroz slike

  Najčešći i najjednostavniji način za određivanje markera za popis je korištenje pozadinske slike (pozadinsko svojstvo). Metoda se oslanja na specificiranje pozadinske slike za stavke popisa u stilskoj tablici, kao i na dopunu (svojstvo paddinga) koje će rezervirati prostor za novi marker. Ispod je primjer koda:

  ul (list-style: none;) li (pozadina: url (put-to- image) no- repeat; padding- left: 20px;)

  Ova metoda oduševljava svojom jedinstvenošću, jer vam omogućuje da postavite apsolutno bilo koji marker u obliku slike. Ispod je kako će naš kod izgledati u pregledniku:

  

  Glavna pozitivna strana ove metode je 100% kompatibilnost s različitim preglednicima, ali unatoč tome, postoji mali nedostatak. Korištenje slike je dodatni poziv poslužitelju.

  Oznake s prije

  Postoji opcija kada možete bez slike, ako to dopuštaju uvjeti dizajna. To je vrlo često dopušteno u dizajnu glavnog sadržaja, kada je popis označen najjednostavnijim elementima, poput kvadrata () ili strelice (→). Tako smo došli do toga da svaki prikladan poseban znak može djelovati kao marker.

  Nadalje, postavlja se pitanje kako umetnuti posebne znakove u elemente popisa. Naravno, ne ručno, inače bi to bio jako dugotrajan i mukotrpan proces, uz sve ostalo i naporan. Za izlazak iz ove situacije pomoći će nam pseudoelement prije, čija se primjena veže na određeni selektor, što nam omogućuje automatizaciju procesa dodjele markera iz posebnih znakova. Ovo rješenje je prikladno za većinu preglednika, uzimajući u obzir činjenicu da će za IE biti naveden izraz.

  Ispod je primjer koda koji generira skraćeni popis s grafičkim oznakama:

  li (ovo. innerHTML = "-" + ovo. innerHTML) / * IE hack * /) li: prije (sadržaj: " \201 3" ; }

  U praksi dobivamo sljedeću sliku:

  

  Podsjetim da su u stvarnim uvjetima hakovi povezani s uvjetnim komentarima.

  Kada koristite ovu metodu, glavna stvar je znati kodiranje potrebne ikone. Također je vrijedno napomenuti da se za izražavanje posebni znakovi pišu numeričkom kombinacijom ili mnemoničkim kodom. Što se tiče svojstva sadržaja, u ovom slučaju prvo se stavlja kosa crta, a zatim se upisuje heksadecimalni kod.

  Korištenje insertAdjacentHTML

  Gornja metoda ne radi uvijek ispravno u legendarnom IE (unatoč haku). Točnije, "štake" za ovaj preglednik nisu do kraja finalizirane. Učinkovitija metoda temelji se na insertAdjacentHTML, u nastavku je kod za ovu metodu:

  li ( // z-indeks: izraz (runtimeStyle.zIndex = 1, insertAdjacentHTML ("afterBegin", "-")); }

  Oznake nacrtane s CSS svojstvima

  Neki kvadratni markeri mogu se nacrtati pomoću nekih CSS svojstava. Na primjer, kroz svojstvo background-color iscrtava se kvadrat s ispunom u boji, a kroz obrub se povlači kvadrat u obliku obruba (usput, na ovaj način se može nacrtati kvadrat s ispunom). Primjer pisanja u CSS datoteci:

  li ( // z-indeks: izraz (runtimeStyle.zIndex = 1, ovaj. unutarnjiHTML = "

  " + ovo. innerHTML) / * hakirati za ue6 i 7 * /) li: prije,. listMarkerBackColor (boja pozadine: # 539127; širina: 7px; visina: 7px; sadržaj: ""; float: lijevo; margina: 6px 6px 0 0; preljev: skriveno;) html. listMarkerBackColor (desno margina: 1px; / * popravi mali dovratak u IE6 * / }

  Dakle, marker nacrtan s CSS svojstvima u praksi će izgledati ovako:

  

  Korištenje prije i prvog djeteta zajedno

  Ova se metoda često koristi pri ukrašavanju krušnih mrvica na mjestu. Tko ne zna o čemu se radi, pogledajte primjer u nastavku.

  

  U ovom slučaju, svaka je veza odvojena jedna od druge posebnim znakom, ali prije prvog elementa ne bi trebao biti nikakav poseban znak. U tome će nam pomoći pseudo-klasa. prvo dijete koji se odnosi samo na prvu stavku na popisu. U obliku koda, trebao bi izgledati ovako

  HTML
  

  < ul> < li>< a href= "#" >Dom < li>< a href= "#" >Blog < li>< a href= "#" >CSS < li>Valjani kod kada se koristi target = "_blank"

  li: prije (sadržaj: " \21 92" ; ) li: prvo dijete: prije (sadržaj: "";)

  Također je vrijedno napomenuti da se ova tehnika koristi ne samo za krušne mrvice, već i za obične popise s grafičkim oznakama, ovisno o zadatku dizajna.

  U kojim preglednicima radi?

  6.0+	4.0+	9.5+	3.0+	3.0+	-	-

  zaključke

  Sumirajući, možemo primijetiti činjenicu da je korištenje pseudoelementa prije opravdano i racionalno u glavnom sadržaju, budući da nema posebnih zahtjeva za dizajn popisa. To će zauzvrat smanjiti opterećenje poslužitelja, u usporedbi s opcijom kada se koristi slika. A ako primijetite i činjenicu da u glavnom sadržaju može biti mnogo popisa s grafičkim oznakama, razlika može postati značajnija. Ali slike su znatno bolje u smislu odluka o dizajnu markera.