Liste sa nabrajanjem u html i css. Postavljanje markera liste na različite načine

Liste sa nabrajanjem vam omogućavaju da razbijete veliki tekst u zasebne blokove, od kojih svaki počinje nabrakom - obično malom tačkom. To skreće pažnju čitaoca na tekst i povećava njegovu čitljivost.

Sa elementom

Povezane su sljedeće karakteristike:
• na mestu gde se dešava
  , pretraživač automatski dodaje prelom reda;
  • lista ima uvlake na vrhu i dnu;
  • Po defaultu, markeri se prikazuju kao popunjeni krug;
  • Svaki element liste je pomeren udesno u odnosu na glavni tekst.

  Slika 1 prikazuje rezultat primjera, ilustrujući gornje karakteristike liste sa nabrajanjem.

  Rice. 1. Prikaz liste za nabrajanje

  Tip markera

  Markeri mogu imati jedan od tri oblika: popunjeni krug (podrazumevano), otvoreni krug i kvadrat. Da biste odabrali tip markera, koristite svojstvo tip-stil liste ili univerzalno svojstvo stila liste (primjer 1). Primjenjuju se sljedeće vrijednosti:

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

  Primjer 1: Promjena izgleda markera

  • Sepulki
  • Sepulcaria
  • Sepulenacija

  Primjer pokazuje kako kreirati listu s nabrajanjem koristeći mali kvadrat pune boje kao ikonu za nabrajanje. Iako je broj vrijednosti ograničen na tri, to ne znači da na raspolaganju imamo samo tri tipa markera. Postoji mnogo specijalnih znakova koji mogu uspješno djelovati kao ikona markera. Pričvrstite ih direktno na

• Neće uspjeti, pa ćete morati to zaobići. Da biste to učinili, sakrijte oznake liste koristeći svojstvo stila liste sa vrijednošću none i u tekstu prije sadržaja
• Dodamo vlastiti karakter koristeći pseudoelement ::before. U primjeru 2, takav marker je trokut.

  Primjer 2: Upotreba::prije

  • Sepulki
  • Sepulcaria
  • Sepulenacija

  Rezultat ovog primjera prikazan je na sl. 2. Pošto korišćenje svojstva stila liste sa vrednošću none uopšte ne uklanja markere, već ih samo sakriva od pogleda, lista se pojavljuje pomerena udesno. Da biste se riješili ove značajke, primjer dodaje svojstvo uvlačenja teksta s negativnom vrijednošću. Njegov zadatak je pomjeriti tekst ulijevo za jedan znak.

  

  Rice. 2. Proizvoljni markeri u listi

  Znak ne mora biti u heksadecimalnom formatu, može se umetnuti direktno u tekst. Glavna stvar je da sačuvate dokument u UTF-8 kodiranju i da ga urednik podržava. Sami znakovi i njihovi kodovi mogu se preuzeti, na primjer, iz LibreOffice Writer-a (slika 3).

  

  Rice. 3. Odabir simbola u LibreOfficeu

  Lista sa ručno nacrtanim markerima

  Stilovi vam omogućavaju da postavite bilo koju odgovarajuću sliku kao marker preko svojstva liste-style-image. Vrijednost je relativna ili apsolutna putanja do grafičke datoteke, kao što je prikazano u primjeru 3.

  Primjer 3: Upotreba slike kao markera

  • Sepulki
  • Sepulcaria
  • Sepulenacija

  Najbolje je odabrati mali crtež kako ne biste pretvorili elemente liste u natpise. Na sl. Slika 4 prikazuje rezultat primjera korištenja malih slika kao markera.

  

  Rice. 4. Crtež kao marker

  Korištenje slike u stilu liste ima neke nedostatke:

  • uzorak se ne može pomicati gore ili dolje;
  • Položaj slike u odnosu na tekst može se razlikovati u različitim pretraživačima.

  Ovi nedostaci se mogu izbjeći korištenjem svojstva pozadine, ono postavlja pozadinsku sliku. Za svaki element liste

• uklanjamo originalne markere i postavljamo pozadinu bez ponavljanja. I kako se tekst ne bi pojavio na vrhu slike, pomičemo ga udesno koristeći padding-left (primjer 4).

  Primjer 4: Korištenje pozadine

  Ul ( margin-left: -1em; ) li ( stil liste: nijedan; pozadina: url(images/bullet.png) bez ponavljanja 0 2px; padding-left: 20px; )

  Položaj teksta i oznake

  Postoje dva načina postavljanja markera u odnosu na tekst: marker se pomera izvan ivice elemenata liste ili omotava oko teksta (slika 5).

  unutra	vani

  Rice. 5. Postavljanje markera u odnosu na tekst

  Za kontrolu položaja markera, koristite svojstvo list-style-position. Ima dva značenja: spolja - bullets se postavljaju izvan tekstualnog bloka (ovo je podrazumevana vrednost) i unutra - bullets su deo tekstualnog bloka i prikazuju se u stavci liste (primer 5).

  Primjer 5: Promjena položaja markera

  • Prije nego što počnete, provjerite da li je oprema uključena u 3BM komplet uključena.
  • Ako nedostaje jedan ili više perifernih uređaja, odmah kontaktirajte tehničko osoblje CC-a.
  • Nakon vizuelnog pregleda radnog područja, možete pažljivo uključiti napajanje 3BM.

  Rezultat ovog primjera prikazan je na sl. 6.

  

  Danas praktično ne postoji nijedna stranica koja ne koristi HTML liste (

  predstavlja uređenu listu,
  - neuređena lista). U ovom tutorijalu pokazat ću vam 8 sjajnih načina da učinite da obične, dosadne html liste izgledaju privlačno. Samo ćemo dodati nekoliko jednostavnih CSS tehnika i naše liste ne samo da će izgledati fantastično, već će imati i nekoliko dodatnih funkcija.

  Sada pogledajte demo da vidite šta ćemo kreirati.

  Izgledaju mnogo bolje, zar ne? I vi možete kreirati takve liste koristeći jednostavan CSS kod. Želite li znati kako? Pročitajte!

  Lista #1: Jednostavan navigacijski sistem

  

  Liste se najčešće koriste prilikom kreiranja navigacijskog menija. Ovaj HTML/CSS primjer koda vam omogućava da kreirate jednostavan, čak i malo skroman, ali atraktivan navigacijski sistem.

  • Dom
  • Blog
  • O
  • Kontakt

  /* LIST #1 */ #list1 ( ) #list1 ul (list-style:none; text-align:center; border-top:1px solid #eee; border-bottom:1px solid #eee; padding:10px 0; ) #list1 ul li ( display:inline; text-transform:uppercase; padding:0 10px; letter-spacing:10px; ) #list1 ul li a (text-decoration:none; color:#eee; ) #list1 ul li a:hover (tekst-decoration:underline;)

  Lista #2: Korišćenje drugačijeg fonta za numerisanje

  

  Problem sa upotrebom liste je što se ona stapa sa tekstom. I brojevi su uvijek iste boje kao i tekst.
  Ali dodajte malo stila i zaboravit ćete na gornja ograničenja i vaši oglasi će postati mnogo privlačniji. Evo kako se to radi:

  Holandija je država u...

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

  Filipini Zvanično poznata kao Republika...

  Ujedinjeno Kraljevstvo Velike Britanije i...

  /* LIST #2 */ #list2 ( width:320px; ) #list2 ol (font-style:italic; font-family:Georgia, Times, serif; font-size:24px; color:#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 ( display:block; )

  Lista #3: Marker slike

  

  Možete lako promijeniti izgled neuređenih oznaka liste navođenjem jedne od standardnih vrijednosti, ali također možete koristiti slike kao markere. Ovo rješenje će pomoći da vaše liste budu originalnije. A evo i koda:

  • Java
  • .NET

  /* LISTA #3 */ #list3 ( ) #list3 ul (list-style-image: url("../images/arrow.png"); color:#eee; font-size:18px; ) #list3 ul li (visina linije:30px;)

  Lista #4: iPhone stil

  

  Ova lista je preuzeta iz članka iPhone Contacts App, kreiranog pomoću CSS-a i jQueryja. Ovako izgledaju liste na iPhoneu. Veoma atraktivno, zar ne? Želite li jednu za svoju web stranicu?

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

  /* LIST #4 */ #list4 ( width:320px; font-family:Georgia, Times, serif; font-size:15px; ) #list4 ul (list-style: none; ) #list4 ul li ( ) #list4 ul li a ( display:block; text-decoration:none; color:#000000; background-color:#FFFFFF; line-height:30px; border-bottom-style:solid; border-bottom-width:1px; border- bottom-color:#CCCCCC; padding-left:10px; cursor:pointer; ) #list4 ul li a:hover ( boja:#FFFFFF; background-image:url(../images/hover.png); background-repeat :repeat-x; ) #list4 je jak ( margin-right:10px; )

  Lista #5: Ugniježđene liste

  

  Ugniježđene liste mogu biti nevjerovatno korisne i izgledati lijepo. Modifikacijom treće tehnike (Bullet Images) možemo kreirati "proširenu listu". Naravno, ne bez pomoći jQueryja:

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

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

  Lista #6: Rimska numeracija + višeredni tip

  

  Podrazumevano, lista koristi standardno numerisanje (1, 2, 3, 4, itd.). Promjenom vrijednosti u CSS-u možete odrediti drugu vrstu numeriranja, na primjer, rimski.
  Takođe, prema zadanim postavkama, numerisanje i oznake se nalaze izvan liste (naša lista broj 2 je odličan primer za to). Ali ovo se može popraviti, 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...

  /* LISTA #6 */ #list6 (familija fontova: "Trebuchet MS", "Lucida Grande", Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; ) #list6 ol (tip-stil liste: gornji -roman; boja:#eee; font-size:14px; list-style-position: inside; ) #list6 ol li ( )

  Lista #7: Linearna lista sa stavkama odvojenim zarezima

  

  Liste se obično koriste za prikaz količine nečega i prikazuju se kao kolona. Ali šta ako vam je potrebna linearna lista? Ovo se postiže promjenom vrijednosti svojstva prikaza na inline. Ali ako iznenada trebate ugraditi listu u tekst, onda prema pravilima stavke na listi trebaju biti odvojene zarezom. Kako to postići? I, jednostavno, koristeći element :after simboličkog koda.

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

  /* LIST #7 */ #list7 ( ) #list7 ul ( boja:#eee; font-size:18px; font-family:Georgia, Times, serif; ) #list7 ul li ( display: inline; ) #list7 ul li:after ( content: ", "; ) #list7 ul li.last:after ( content: "."; )

  Lista #8: Rotirajući meni za navigaciju

  

  Evo posljednje tehnike koja zahtijeva da CSS3 radi (podržano samo u najnovijim verzijama Firefoxa, Safarija i Chromea). Kada zadržite pokazivač iznad jednog od elemenata bloka, aktivira se efekat rotacije. Naravno, nije najpovoljniji način, ali vrlo lijep.

  • Dom
  • Blog
  • O
  • Kontakt

  /* LIST #8 */ #list8 ( ) #list8 ul (list-style:none; ) #list8 ul li (font-family:Georgia,serif,Times; font-size:18px; ) #list8 ul li a ( display:block; širina:300px; visina:28px; boja pozadine:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px; text-decoration:nema; boja :#bfe1f1; ) #list8 ul li a:hover ( -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000; -webkit-transform:rotate(-5deg); -webkit -box-shadow:10px 10px 20px #000000; transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; )

  Zaključak

  Kao što vidite, moguće je kreirati jedinstvene stvari iz obične html liste. I sve se to radi pomoću CSS-a. Veoma mi je drago ako ste naučili mnogo zanimljivih stvari za sebe.

  U HTML markup jeziku postoje 3 vrste lista - uređene (numerisane), neuređene (nenumerisane) i liste definicija.

  Da biste napravili takvu listu, potrebne su vam 2 vrste elemenata: 'ul' (skraćenica od neuređena lista, tj. neuređena lista) i 'li' (element liste). Sve što je napisano unutar 'li' je označeno markerom.

  Izgled takve liste može se kontrolisati navođenjem tipova markera.

  Vrste markera

  Postoji poseban atribut tipa koji se nalazi u oba elementa liste. Ovo je vaš tip markera. Postoje samo 3 vrste: krug, disk i kvadrat:

  - kvadrat
  - disk
  - obim

  Ovisno o tome gdje navedete tip markera, možete ga promijeniti za cijelu listu ili za određeni element.

  Naručena lista

  Da biste napravili listu, potrebna su vam i 2 elementa: 'ol' i 'li' (element liste). Markeri se zamjenjuju brojevima sa tačkom. Primjer jednostavne liste:

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

  Izgled uređene liste možete kontrolisati navođenjem različitih tipova numeracije.

  Vrste numeracije

  Postoji poseban atribut tipa koji se postavlja u element 'ol' ili 'li'. Ovo je vaš tip liste. Postoji ukupno 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)
  - Od kojeg broja započeti numeraciju?

  U zavisnosti od toga gde navedete vrstu numeracije, možete je promeniti za celu listu ili za određeni element.

  Lista definicija

  Napravljena je lista definicija za unose u rječniku.

  Postoji opći kontejner 'dl'. Unutar njega su 'dt' (termin definicije) i 'dd' (opis definicije). Najjednostavniji primjer:

  Marketing odjel

  Ovaj odjel se bavi promocijom roba i usluga

  Odjel za finansije

  Ovo odjeljenje se bavi svim finansijskim transakcijama

  Svi elementi svih lista su blok elementi. Ali samo inline elementi se mogu postaviti unutar 'dt' elementa. Možete staviti šta god želite u elemente 'dd' i 'li'. Odavde dolaze ugniježđene liste.

  Ugniježđeno (mješovite liste)

  To su liste na više nivoa, unutar kojih postoji hijerarhija. Često se takve liste koriste prilikom izrade mape lokacije. primjer:

  Miješana lista

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

  1.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> zvijezde:</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ču

  1.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ču

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

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

  Kao 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	Badminton Bejzbol
  Markeri u obliku malih latiničnih slova	a	Chomolungma Chogori Kanchenjunga
  Markeri u obliku velikih latiničnih slova	A	Summit Plummet Tantrum Alley Insano
  Oznake za male rimske brojeve	i	Filipinsko more Arabijsko more koraljno more
  Oznake velikih rimskih brojeva	I	Crveni Zeleno Plava

  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 listi

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

  Napravili 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ču

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

  Članak predstavlja nekoliko metoda koje vam omogućavaju da postavite određeni marker za nenumerisanu listu, a također ukazuje na njihove prednosti i nedostatke

  Ako analizirate bilo koji sajt, možete otkriti da sadržaj vrlo često sadrži liste raznih vrsta: menije, liste proizvoda itd. U HTML kodu oznaka je odgovorna za numerisanu listu, a oznaka za označenu lista.

  Vrijedi napomenuti i činjenicu da su u praksi liste sa nabrajanjem mnogo češće, ali imaju jedan mali nedostatak. Oznaka na listi se pojavljuje drugačije u zavisnosti od pretraživača koji koristite. Za ozbiljnog dizajnera ovo je problem.

  Da biste eliminirali ovaj negativni efekat, morate otkazati izlaz markera koristeći svojstvo stila liste:

  ol, ul (stil liste: nema; )

  Ovo počinje formiranje liste sa jedinstvenim markerima i ikonama. Ispod su najčešći načini za predstavljanje ikona stavki liste koje su jedinstvene i konzistentne u svim pretraživačima.

  Markeri kroz slike

  Najčešći i najjednostavniji način za navođenje markera za listu je korištenje pozadinske slike (svojstvo pozadine). Metoda se zasniva na određivanju u tabeli stilova pozadinske slike za stavke liste, kao i svojstva paddinga, koja rezerviše prostor za novi marker. Ispod je primjer koda:

  ul ( stil liste: nema; ) li( pozadina: url (putanja do slike) ne ponavlja; padding- lijevo: 20px; )

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

  

  Glavna pozitivna strana ove metode je da je 100% kompatibilna sa svim pretraživačima, ali uprkos tome, postoji mali nedostatak. Korišćenje slike je dodatni poziv serveru.

  Markeri koji se koriste ranije

  Postoji opcija kada možete bez slike, ako to dozvoljavaju uslovi dizajna. Ovo je vrlo često dozvoljeno pri dizajniranju glavnog sadržaja, kada je lista označena najjednostavnijim elementima, kao što su kvadrat ( ) ili strelica ( →). Dakle, došli smo do toga da svaki odgovarajući specijalni znak može djelovati kao marker.

  Zatim se postavlja pitanje kako umetnuti posebne znakove u elemente liste. Naravno, ne ručno, inače bi to bio veoma dugotrajan i zamoran proces, plus bio bi i radno intenzivan. Pseudo-element će nam pomoći da se izvučemo iz ove situacije prije, čija je upotreba vezana za određeni selektor, što nam omogućava da automatiziramo naš proces dodjeljivanja markera iz posebnih znakova. Ovo rješenje je pogodno za većinu pretraživača, uzimajući u obzir činjenicu da će za IE biti napisano izraz.

  Ispod je primjer koda koji proizvodi listu s nabrajanjem s crticom:

  li( this. innerHTML = "-" + this. innerHTML) /*IE hack*/ ) li: before( content: " \201 3" ; }

  U praksi dobijamo sledeću sliku:

  

  Da vas podsjetim da su u stvarnim uslovima hakovi povezani sa uslovnim 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 kao numerička kombinacija ili mnemonički kod. Što se tiče svojstva sadržaja, u ovom slučaju se prvo postavlja kosa crta, a zatim se upisuje heksadecimalni kod.

  Korištenje insertAdjacentHTML

  Gornja metoda ne radi uvijek ispravno u legendarnom IE (uprkos haku). Tačnije, „štake“ za ovaj pretraživač nisu u potpunosti razvijene. Efikasnija metoda se zasniva na insertAdjacentHTML, ispod je kod za ovu metodu:

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

  Markeri nacrtani CSS svojstvima

  Neki kvadratni markeri se mogu nacrtati pomoću nekih CSS svojstava. Na primjer, kvadrat s ispunom u boji se crta pomoću svojstva background-color, a kvadrat u obliku okvira se crta pomoću svojstva granice (usput, kvadrat s ispunom se može nacrtati na ovaj način) . Primjer unosa u CSS fajlu:

  li( //z-indeks: izraz(runtimeStyle.zIndex = 1, ovo. innerHTML = "

  " + ovo. innerHTML) /* hack za e6 i 7 */) li: prije, . listMarkerBackColor( boja pozadine: #539127; širina: 7px; visina: 7px; sadržaj: "" ; float: lijevo; margina: 6px 6px 0 0 ; overflow: skriveno; ) html . listMarkerBackColor( margin-desno: 1px; /* popraviti mali bug u IE6 */ }

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

  

  Korištenje prije i prvog djeteta u kombinaciji

  Ova metoda se često koristi pri kreiranju krušnih mrvica na web stranici. Za one koji ne znaju o čemu govorimo, pogledajte primjer u nastavku.

  

  U ovom slučaju, svaka veza je odvojena jedna od druge posebnim znakom, ali prije prvog elementa ne bi trebalo biti nikakvih posebnih znakova. U tome će nam pomoći pseudo-klasa prvo dijete, koji pristupa samo prvom elementu liste. U kodu bi to trebalo izgledati ovako

  HTML
  

  < ul> < li>< a href= "#" >Dom < li>< a href= "#" >Blog < li>< a href= "#" >CSS < li>Važeći kod kada koristite 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 redovne liste s nabrajanjem, ovisno o dizajnu.

  U kojim pretraživačima radi?

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

  zaključci

  Sumirajući, možemo primijetiti činjenicu da je upotreba pseudoelementa prije opravdana i racionalna u glavnom sadržaju, budući da ne postoje posebni zahtjevi za dizajn lista. Ovo će zauzvrat smanjiti opterećenje servera, u poređenju sa opcijom kada se koristi slika. A ako primijetite i činjenicu da glavni sadržaj može sadržavati mnogo lista sa nabrajanjem, onda razlika može postati značajnija. Ali slike imaju velike koristi u smislu dizajnerskih rješenja markera.