Liste cu marcatori în html și css. Setarea unui marcator de listă în moduri diferite

Listele cu marcatori vă permit să împărțiți textul mare în blocuri separate, fiecare dintre acestea începând cu un marcator - de obicei o perioadă mică. Acest lucru atrage atenția cititorului asupra textului și crește lizibilitatea acestuia.

Cu element

sunt asociate următoarele caracteristici:
• în locul unde se întâlneşte
  , browserul adaugă automat o întrerupere de linie;
  • lista are liniuțe de sus și de jos;
  • marcatorii sunt afișați implicit ca un cerc umplut;
  • fiecare element al listei este deplasat la dreapta în raport cu textul principal.

  Figura 1 prezintă rezultatul unui exemplu care ilustrează caracteristicile de mai sus ale unei liste cu marcatori.

  Orez. 1. Vedere a listei cu marcatori

  Tip marker

  Markerii pot avea unul din trei tipuri: cerc umplut (implicit), cerc deschis și pătrat. Pentru a selecta tipul de marcator, utilizați proprietatea list-style-type sau stilul universal listă (exemplul 1). Se aplică următoarele valori:

  • disc - markere sub formă de cerc umplut;
  • cerc - marcatori sub forma unui cerc deschis;
  • pătrat - marcatori pătrați.

  Exemplul 1. Modificarea aspectului unui marker

  • Sepulki
  • Sepulcarie
  • Sepulenie

  Exemplul arată cum să creați o listă cu marcatori folosind un pătrat solid și mic ca pictogramă marcator. Deși numărul de valori este limitat la trei, asta nu înseamnă că avem doar trei tipuri de marker la dispoziție. Există multe caractere speciale care pot acționa cu succes ca o pictogramă marcator. „Înșurubați”-le direct

• nu va funcționa, așa că trebuie să o rezolvi. Pentru a face acest lucru, ascundeți marcatorii de listă folosind proprietatea de stil listă cu valoarea none și în textul înainte de conținut.
• adăugați propriul nostru simbol folosind :: înainte de pseudo-element. În exemplul 2, triunghiul este folosit ca un astfel de marcator.

  Exemplul 2. Utilizarea :: înainte

  • Sepulki
  • Sepulcarie
  • Sepulenie

  Rezultatul acestui exemplu este prezentat în Fig. 2. Deoarece folosirea proprietății de stil listă cu valoarea none nu elimină deloc marcatorii, ci doar le ascunde din vedere, lista este deplasată la dreapta. Pentru a scăpa de această caracteristică, exemplul adaugă o proprietate negativă de indentare a textului. Sarcina sa este de a muta textul spre stânga un caracter.

  

  Orez. 2. Markeri arbitrari din listă

  Caracterul nu trebuie să fie în format hexazecimal; el poate fi inserat direct în text. Principalul lucru este să salvați documentul în codificare UTF-8 și ca editorul să îl susțină. Simbolurile în sine și codurile lor pot fi preluate, de exemplu, din LibreOffice Writer (Fig. 3).

  

  Orez. 3. Selectarea unui simbol în LibreOffice

  Lista cu markere desenate manual

  Stilurile vă permit să setați orice imagine potrivită ca marcator prin proprietatea list-style-image. Valoarea este o cale relativă sau absolută către fișierul grafic, așa cum se arată în exemplul 3.

  Exemplul 3. Utilizarea unei imagini ca marker

  • Sepulki
  • Sepulcarie
  • Sepulenie

  Cel mai bine este să alegeți o cifră mică pentru a nu transforma elementele din listă în legende. În fig. 4 arată rezultatul exemplului de utilizare a imaginilor mici ca markeri.

  

  Orez. 4. Desenul ca marker

  Utilizarea list-style-image are câteva dezavantaje:

  • desenul nu poate fi mutat în sus sau în jos;
  • în diferite browsere, poziția imaginii în raport cu textul poate diferi.

  Acest lucru poate fi evitat folosind proprietatea de fundal, care setează imaginea de fundal. Pentru fiecare articol din listă

• eliminăm marcajele originale și setăm imaginea de fundal fără a repeta. Și pentru ca textul să nu apară deasupra imaginii, îl deplasăm la dreapta prin padding-left (exemplul 4).

  Exemplul 4. Utilizarea fundalului

  Ul (margine-stânga: -1em;) li (stil listă: niciunul; fundal: url (imagini/bullet.png) fără repetare 0 2px; padding-left: 20px;)

  Poziția textului și a marcatorului

  Există două moduri de a poziționa marcatorul în raport cu text: marcatorul este mutat în afara chenarului elementelor din listă sau înfășurat în jurul textului (Fig. 5).

  interior	in afara

  Orez. 5. Amplasarea markerilor în raport cu textul

  Proprietatea list-style-position este folosită pentru a controla poziția markerilor. Are două semnificații: exterior - marcatorii sunt plasați în afara blocului de text (acesta este implicit) și interior - marcatorii fac parte din blocul de text și sunt afișați în elementul din listă (exemplul 5).

  Exemplul 5. Schimbarea poziției markerilor

  • Vă rugăm să verificați echipamentul inclus cu kitul 3BM înainte de a începe lucrul.
  • În absența unuia sau mai multor dispozitive periferice, trebuie să contactați imediat personalul tehnic al VC.
  • După inspecția vizuală a zonei de lucru, puteți porni cu atenție alimentarea 3BM.

  Rezultatul acestui exemplu este prezentat în Fig. 6.

  

  Astăzi, practic nu există nici un site care să nu folosească liste HTML (

  reprezintă o listă ordonată,
  - lista neordonata). În acest tutorial, vă voi arăta 8 moduri grozave de a face listele html plictisitoare obișnuite atractive. Vom adăuga doar câteva tehnici CSS simple, iar listele noastre nu numai că vor arăta minunat, ci și câteva caracteristici suplimentare.

  Acum urmăriți demonstrația pentru a vedea ce vom crea.

  Arată mult mai bine, nu? Și tu poți crea astfel de liste cu cod CSS simplu. Vrei să știi cum? Citiți mai departe!

  Lista # 1: Sistem de navigare simplu

  

  Cel mai adesea, listele sunt folosite la crearea unui meniu de navigare. Codul pentru acest exemplu HTML / CSS vă permite să creați un sistem de navigare simplu, chiar puțin modest, dar atractiv.

  • Acasă
  • Blog
  • Despre
  • a lua legatura

  / * LISTA # 1 * / # list1 () # list1 ul (stil listă: niciunul; text-align: center; margine-sus: 1px solid #eee; margine-bottom: 1px solid #eee; padding: 10px 0; ) # list1 ul li (afișare: inline; text-transform: majuscule; padding: 0 10px; letter-spacing: 10px;) # list1 ul li a (text-decoration: none; culoare: #eee;) # list1 ul li a: hover (text-decor: subliniat;)

  Lista de verificare # 2: Utilizarea unui font diferit pentru numerotare

  

  Problema cu utilizarea unei liste este că aceasta se îmbină cu textul. Și numerele sunt întotdeauna de aceeași culoare ca și textul.
  Adăugați totuși ceva stil și veți uita de restricțiile de mai sus, iar listele voastre vor deveni mult mai atractive. Iată cum se face:

  Olanda este o tara in...

  Statele Unite ale Americii este un constituțional federal...

  Filipine cunoscută oficial drept Republica...

  Regatul unit al Marii Britanii si...

  / * LIST # 2 * / # list2 (lățime: 320px;) # list2 ol (stil font: italic; font-family: Georgia, Times, serif; font-size: 24px; culoare: # 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 (afișare: bloc;)

  Lista # 3: Marcatori de imagine

  

  Puteți schimba cu ușurință aspectul marcatorilor de listă neordonați prin specificarea uneia dintre valorile standard, dar puteți utiliza și imagini ca marcatori. Această soluție vă va ajuta să vă faceți listele mai originale. Și iată codul:

  • Java
  • .NET

  / * LISTĂ # 3 * / # list3 () # list3 ul (list-style-image: url ("../ imagini / arrow.png"); culoare: #eee; dimensiunea fontului: 18px;) # list3 ul li (înălțimea liniei: 30px;)

  Lista # 4: în stil iPhone

  

  Această listă este preluată din aplicația iPhone Contacts, construită cu CSS și jQuery. Așa arată listele pe un iPhone. Foarte atrăgător, nu-i așa? Vrei asta pe site-ul tău?

  • Toronto 2004
  • Beijing 2008
  • Londra 2012
  • Rio de janeiro 2016

  / * LIST # 4 * / # list4 (lățime: 320px; font-family: Georgia, Times, serif; font-size: 15px;) # list4 ul (list-style: none;) # list4 ul li () # list4 ul li a (afișare: bloc; text-decor: niciunul; culoare: # 000000; culoare de fundal: #FFFFFF; line-height: 30px; border-bottom-style: solid; border-bottom-width: 1px; border- culoare de jos: #CCCCCC; padding-left: 10px; cursor: pointer;) # list4 ul li a: hover (culoare: #FFFFFF; background-image: url (../ images / hover.png); background-repeat : repeat-x;) # list4 ul li a strong (marja-dreapta: 10px;)

  Lista # 5: Liste imbricate

  

  Listele imbricate pot fi incredibil de utile și pot arăta frumos. Prin modificarea celei de-a treia tehnici (Imagini Marker), putem crea o „listă extinsă”. Desigur, nu fără ajutorul jQuery:

  1. Google
     1. Picasa
     2. Arzător de furaje
     3. Youtube
  2. Microsoft
     1. Corporația Corel
     2. Zignale
     3. ByteTaxi
  3. Yahoo!
     1. Xoopit
     2. BuzzTracker
     3. MyBlogLog

  / * LIST # 5 * / # list5 (culoare: #eee;) # list5 ol (dimensiune font: 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 (culoare: # bfe1f1; înălțime: 15px; margin-left: 10px;)

  Lista # 6: numerotare romană + tip multilinie

  

  În mod implicit, lista utilizează numerotarea standard (1, 2, 3, 4 etc.). Schimbând valoarea în CSS, puteți seta un alt tip de numerotare, de exemplu, Roman.
  De asemenea, în mod implicit, numerotarea și marcatoarele sunt situate în afara listei (un exemplu excelent în acest sens este lista noastră de la numărul 2). Dar acest lucru se poate repara, trebuie doar să modificați valoarea proprietății list-style-position în interior.

  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 (familie de fonturi: "Trebuchet MS", "Lucida Grande", Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;) # list6 ol (list-style-type: upper -roman; color: #eee; font-size: 14px; list-style-position: inside;) # list6 ol li ()

  Lista # 7: Listă liniară cu elemente separate prin virgulă

  

  De obicei, listele sunt folosite pentru a afișa cantitatea de ceva și sunt afișate într-o bară. Dar dacă vrei o listă liniară? Acest lucru se realizează prin schimbarea valorii proprietății de afișare în inline. Dar dacă brusc trebuie să încorporați lista în text, atunci, conform regulilor, paragrafele listei ar trebui separate prin virgulă. Cum se poate realiza acest lucru? Sau, pur și simplu, folosind elementul: after al codului simbolic.

  • Primul articol inline
  • Al doilea articol inline
  • Al treilea articol inline
  • Al patrulea articol inline

  / * LIST # 7 * / # list7 () # list7 ul (culoare: #eee; font-size: 18px; font-family: Georgia, Times, serif;) # list7 ul li (display: inline;) # list7 ul li: după (conținut: ",";) # list7 ul li.last: după (conținut: ".";)

  Lista # 8: Rotirea meniului de navigare

  

  Iată ultima tehnică care necesită CSS3 pentru a funcționa (suportată doar de cele mai recente Firefox, Safari și Chrome). Când treceți cursorul peste unul dintre elementele blocului, efectul este activat - rotație. Cu siguranță nu este cel mai convenabil mod, dar foarte frumos.

  • Acasă
  • Blog
  • Despre
  • a lua legatura

  / * LIST # 8 * / # list8 () # list8 ul (list-stil: niciunul;) # list8 ul li (familie font: Georgia, serif, Times; dimensiunea fontului: 18px;) # list8 ul li a ( afișaj: bloc; lățime: 300 px; înălțime: 28 px; culoare de fundal: # 333; chenar-stânga: 5 px solid # 222; chenar-dreapta: 5 px solid # 222; umplutură-stânga: 10 px; text-decor: niciunul; culoare : # bfe1f1;) # list8 ul li a: hover (-moz-transform: rotire (-5deg); -moz-box-shadow: 10px 10px 20px # 000000; -webkit-transform: rotire (-5deg); -webkit -box-shadow: 10px 10px 20px # 000000; transformare: rotire (-5deg); box-shadow: 10px 10px 20px # 000000;)

  Concluzie

  După cum puteți vedea, este cu adevărat posibil să creați lucruri unice dintr-o listă html obișnuită. Și toate acestea se fac prin CSS. Mă bucur foarte mult dacă ai învățat o mulțime de lucruri interesante pentru tine.

  În limbajul de marcare html, există 3 tipuri de liste - liste ordonate (numerotate), neordonate (nenumerotate) și liste de definiții.

  Pentru a construi o astfel de listă, aveți nevoie de 2 tipuri de elemente: „ul” (prescurtare pentru listă neordonată, adică o listă neordonată) și „li” (articol de listă). Orice lucru scris în interiorul „li” este marcat cu un marker.

  Aspectul unei astfel de liste poate fi controlat prin specificarea tipurilor de marcatori.

  Tipuri de markere

  Există un atribut de tip special, care este plasat pe ambele elemente ale listei. Acesta este tipul dvs. de marker. Există în total 3 tipuri: cerc, disc și pătrat:

  - pătrat
  - disc
  - cerc

  În funcție de locul în care să specificați tipul de marcator, îl puteți modifica pentru întreaga listă sau pentru un anumit element.

  Lista ordonata

  Pentru a construi lista, aveți nevoie și de 2 elemente: „ol” și „li” (articol de listă). Marcatoarele sunt înlocuite cu numere punctate. Un exemplu de listă simplă:

  1. primul element
  2. al doilea element
  3. ultimul element

  Puteți controla aspectul unei liste ordonate specificând diferite tipuri de numerotare.

  Tipuri de numerotare

  Există un atribut de tip special care apare pe elementul „ol” sau „li”. Acesta este tipul listei dvs. Există 5 tipuri în total:

  - Numerotarea cu cifre arabe (1, 2, 3)
  - Numerotarea cu majuscule (A, B, C)
  - Numerotarea cu litere mici (a, b, c)
  - Numerotarea cu cifre romane mari (I, II, III)
  - Numerotarea cu cifre romane mici (i, ii, iii)
  - Cu ce ​​cifră să începi numerotarea

  În funcție de unde să specificați tipul de numerotare, o puteți modifica pentru întreaga listă sau pentru un anumit element.

  Lista de definiții

  A fost elaborată o listă de definiții pentru intrările din dicționar.

  Există un container comun „dl”. În interiorul acestuia sunt „dt” (definiția termin) și „dd” (descrierea definiției). Cel mai simplu exemplu:

  Departamentul de marketing

  Acest departament este angajat în promovarea bunurilor și serviciilor

  Departament financiar

  Acest departament se ocupă de toate tranzacțiile financiare

  Toate elementele tuturor listelor sunt blocate. Dar în interiorul elementului „dt”, puteți pune doar elemente inline. Puteți pune orice doriți în elementele „dd” și „li”. Aici intervin listele imbricate.

  Imbricate (liste mixte)

  Acestea sunt liste pe mai multe niveluri, în cadrul cărora există o ierarhie. Astfel de liste sunt adesea folosite la construirea unui sitemap. Exemplu:

  Lista mixtă

  VESTIREA ZILEI

  Astăzi ploaia

  Va ploua toată ziua

  ȘTIREA NOPȚII

  Va ploua noaptea

  Mâine va începe o nouă zi

  O zi buna!

  În acest articol, veți afla despre toate posibilitățile listelor, veți înțelege cum să faceți o listă numerotată, veți stăpâni etichetele care vă vor ajuta să faceți o listă simplă cu marcatori mai interesantă și mai vizibilă cu marcatori arbitrare. După finalizarea lecției, veți înțelege unde sunt utilizate listele și în ce circumstanțe pot fi utilizate.

  Acest articol este al treilea din acest scurt tutorial despre HTML de bază. Înainte de a citi această lecție, vă recomand să parcurgeți cele două anterioare:

  Articolul tocmai a început și este posibil să observați deja utilizarea unei liste standard cu marcatori. Pe site-ul meu, pare destul de simplu: în stânga există o mică liniuță cu o linie și un marcator pătrat. În continuare, în articol, vom arunca o privire mai atentă la ce sunt markerii, cum să faci numere și, de asemenea, cum să-ți faci propriul marcaj.

  În fiecare parte a articolului, crearea anumitor liste va fi însoțită de explicații detaliate pentru inserarea unei anumite liste.

  1. Liste cu marcatori în HTML

  Acest tip de liste este folosit pentru a enumera un set de elemente similare ca semnificație în text. Aceasta poate fi o listă de link-uri care au legătură cu același subiect, o explicație detaliată pentru părți individuale ale textului. Dar să vedem cum arată listele cu marcatori în cod:

  Și așa arată în browser:

  Orez. 1.1. Vizualizare standard a listei neordonate HTML cu marcatori în browser

  1.1 Marcatori standard pentru listele cu marcatori

  În imaginea de mai sus (Fig 1.1.), puteți vedea cercurile de la începutul fiecărui element de meniu. Acesta este markerul. În mod implicit, este un cerc umplut în browser. Există mai multe tipuri de marcatori în HTML: cerc umplut, cerc gol și pătrat. Nu necesită CSS sau imagini de la terți:

  1.2 Marcator de listă ca un cerc gol

  Cunoașteți valorile atributelor, dar acum să vedem cum să faceți o listă cu marcatori HTML în cod. Din tabelul de mai sus, am selectat a doua valoare „cerc” pentru atributul tip și am atribuit-o listei noastre cu marcatori:

  <html> <cap> <titlu> Un exemplu de listă cu marcatori cu un marcator cerc gol</ titlu> </ cap> <corp> <p> Stele:</ p> <ul type = „cerc”> <li> Sirius</ li> <li> Arcturus</ li> <li> Pollux</ li> <li> Betelgeuse</ li> <li> Soarele</ li> </ ul> </ corp> </ html>

  Să vedem cum va arăta acest cod în browser:

  Orez. 1.2. Vedere marcatori pentru o listă sub formă de cerc în browser

  1.3 Marcator de listă sub formă de pătrat

  Să vedem și ultimul exemplu cu un marcator pătrat pentru lista HTML:

  Observați marcatorul, acesta a devenit pătrat:

  Orez. 1.3. Marcator pentru o casetă de listă ca un pătrat într-un browser

  Notă importantă: aceasta nu mai este folosită pentru stilarea listelor cu marcatori. Există o separare clară între CSS (citiți ce este CSS) și HTML. HTML este pentru marcaj și CSS pentru aspectul bun.

  Codul care conține acest atribut, când se specifică tipul documentului curent ca HTML5 (""), va da o eroare în timpul validării. Dacă nu ați auzit ce este validarea, atunci ar trebui să mergeți aici -.

  Eroarea va fi după cum urmează:

  Orez. 1.4. Eroare la validator la utilizarea atributului „tip” al listei

  Ne-am dat seama de listele cu marcatori. Acum să trecem la liste numerotate, apoi ne vom uita la liste imbricate și câteva exemple gata făcute care sunt cel mai des folosite pe site-uri reale.

  2. Liste numerotate în HTML

  Spre deosebire de tipul anterior de liste, listele numerotate au o caracteristică importantă: adaugă automat numerotarea. Acest lucru este util atunci când trebuie să numerotați o listă mare. Va dura foarte mult timp manual, dar vă puteți pierde totuși. O listă numerotată este specificată folosind o etichetă. Cum arată în practică:

  Un exemplu de listă numerotată:

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  <html> <cap> <titlu> Exemplu de listă numerotată standard</ titlu> </ cap> <corp> <p> Unu până la cinci:</ p> <ol> <li> Primul</ li> <li> Al doilea</ li> <li> Al treilea</ li> <li> Al patrulea</ li> <li> a cincea</ li> </ ol> </ corp> </ html>

  Iată cum arată o listă numerotată cu setările implicite din browser:

  Orez. 2.1. Lista numerotată într-un browser cu setări standard

  La fel ca predecesorul său (lista cu marcatori), are propriile stiluri de afișare a numerelor. Numerotarea simplă nu este singurul tip de marcatori pentru o listă numerotată în HTML.

  2.1 Marcatori standard pentru o listă numerotată

  Aici avem de ales nu dintre trei tipuri de markere, ci dintre cinci:

  Numele markerului	Valoarea atributului „tip”.	Exemplu de listă
  Marcatori cu cifre arabe	1	Badminton Baseball
  Marcatori sub formă de litere latine mici	A	Chomolungma Chogori Kanchenjunga
  Marcatori sub formă de litere mari latine	A	Vârful s-a prăbușit Aleea Tantrumului Nebun
  Marcatori cu cifre romane minuscule	i	marea Filipinelor Marea Arabiei Marea coralilor
  Cifre romane majuscule	eu	roșu Verde Albastru

  2.2 Numerotare personalizată în lista HTML

  Pe lângă rezultatul obișnuit al unei liste numerotate, ne putem începe numerotarea de la orice cifră. Pentru a face acest lucru, trebuie să setați atributul suplimentar „start”. Această numerotare funcționează pentru toate tipurile de marcatori pentru liste numerotate. Cum arată în practică:

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  <html> <cap> <titlu> Numerotare aleatoare pentru o listă numerotată</ titlu> </ cap> <corp> <p>Începem să numărăm la doisprezece:</ p> <ol tip = "a" start = "12"> <li> Doisprezece</ li> <li> Treisprezece</ li> <li> Paisprezece</ li> <li> Cincisprezece</ li> <li>Şaisprezece</ li> </ ol> </ corp> </ html>

  Iată cum se va afișa pe un site live:

  Orez. 2.2. Numerotarea dintr-un număr arbitrar dintr-o listă numerotată

  În imaginea de mai sus, am numerotat lista începând de la douăsprezece, făcând în același timp marcatoare sub formă de litere latine mici. Acum, cred, a devenit clar cum să utilizați aceste atribute în proiectele dvs.

  Deocamdată, să trecem la listele HTML imbricate.

  3. Cum se face o listă multinivel (imbricată) în HTML

  Listele pe mai multe niveluri sunt folosite pe site la construirea meniului. Acest meniu arată cel mai adesea ca un drop-down fie în jos (lecție activată), fie ca drop-down la stânga sau la dreapta. Astfel de meniuri vă permit să stocați alte elemente de meniu într-o formă compactă.

  Folosind modele de mașini ca exemplu, vom construi o listă pe mai multe niveluri în HTML:

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

  <html> <cap> <titlu> Listă cu marcatori imbricată HTML</ titlu> </ cap> <corp> <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> </ corp> </ html>

  Observați cum arată o listă pe mai multe niveluri într-un browser:

  Orez. 3.1. Un exemplu de listă pe mai multe niveluri în HTML

  Am făcut o listă pe mai multe niveluri folosind un marcator (tag

  ). Lista treptată cu modele Citroen a venit cu alte semne. Lista principală cu gloanțe pline și lista de nivel 2 cu cercuri goale. Dar, amintiți-vă, cu atributul „type” putem suprascrie marcatorii (este mai bine să le setăm).

  Dar putem combina liste cu mai multe niveluri numerotate și marcate astfel:

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

  <html> <cap> <titlu> Liste numerotate, marcate și numerotate în HTML</ titlu> </ cap> <corp> <ul> <li> Primul grup de lalele<ol> <li> Clasa întâi<ul> <li> Lalele timpurii simple</ li> </ ul> </ li> <li> Clasa a doua<ul> <li> Lalele duble</ li> </ ul> </ li> </ ol> </ li> </ ul> </ corp> </ html>

  În exemplul de mai sus, avem cuib dublu (2 nivele). Mai întâi, punem o listă cu două clase de lalele, o avem numerotată. Apoi, o listă cu marcatori este imbricată în fiecare dintre elementele din lista numerotată.

  Ne uităm la aspectul său în browser:

  Orez. 3.2. Un exemplu de listă numerotată pe mai multe niveluri într-o listă cu marcatori într-un browser

  4. Resurse utile pentru liste HTML

  Conține informații care necesită înțelegerea proprietăților CSS. Pentru a face acest lucru, vă recomand să studiați următoarele lecții:. Toate exemplele vor fi imediat cu codul sursă și defalcate în file HTML (structură), CSS (stiluri) și Rezultat (rezultat).

  4.1 Cum se transformă o listă HTML într-un șir

  Poate fi necesar să transformați lista HTML într-un șir atunci când creați un meniu orizontal. Este foarte simplu să o faci:

  4.2 Cum se face o listă HTML fără pictogramă

  Proprietatea list-style-type din CSS este responsabilă pentru aceasta (mai multe detalii):

  4.3 Cum să faci o listă în HTML centrată

  Un element din listă este un element bloc, deci trebuie să fie centrat folosind umplutură. Dar există un punct important - trebuie să specificăm în mod explicit lățimea pentru ca alinierea să funcționeze:

  4.4 Cum se face o listă în HTML cu imagini

  Este suficientă o singură listă de proprietăți CSS-stil-imagine. În interiorul adresei URL, specificați adresa înaintea pictogramei. Vreau doar să remarc că este mai bine să selectați imediat o imagine mică, deoarece înălțimea liniei de listă depinde de aceasta:

  4.5 HTML cu marcatori Listați marcatorul dvs

  În acest caz, este necesar să conectați în prealabil pictogramele fonturilor (de exemplu, FontAwesome). Apoi puteți crea orice pictogramă în loc de marcatorul standard:

  4.6 Cum se face o listă în HTML cu mai multe coloane

  Pentru a face o listă cu mai multe coloane vom folosi proprietatea CSS column-count (această proprietate este acceptată numai în următoarele browsere: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). De asemenea, trebuie să setați înălțimea listei pentru a vedea împărțirea în mai multe coloane:

  5. Practica de lucru cu liste

  În videoclipul de mai jos, puteți vedea toate lucrările cu liste HTML în practică:

  Articolul prezintă mai multe modalități care vă permit să setați un marker specific pentru o listă neordonată, precum și avantajele și dezavantajele acestora.

  Dacă analizezi orice site, poți constata că conținutul conține foarte des liste de diverse feluri: meniuri, listă de produse etc. În codul HTML, o etichetă este responsabilă pentru o listă numerotată, iar una cu marcatori -.

  De asemenea, merită remarcat faptul că, în practică, listele cu marcatori sunt mult mai frecvente, dar au un mic dezavantaj. Marcatorul din listă este afișat diferit în funcție de browserul pe care îl utilizați. Pentru designerul serios, aceasta este o problemă.

  Pentru a elimina acest efect negativ, trebuie să anulați afișarea marcatorului utilizând proprietatea de stil listă:

  ol, ul (list-style: none;)

  Aici începe formarea unei liste cu marcatoare și pictograme unice. Mai jos sunt cele mai comune moduri de a reprezenta pictogramele elementelor din listă care sunt unice și identice în toate browserele.

  Markere prin imagini

  Cea mai comună și mai simplă modalitate de a specifica un marcator pentru o listă este utilizarea imaginii de fundal (proprietatea de fundal). Metoda se bazează pe specificarea imaginii de fundal pentru elementele listei din foaia de stil, precum și pe padding (proprietatea padding) care va rezerva spațiu pentru noul marker. Mai jos este un exemplu de cod:

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

  Această metodă mulțumește cu unicitatea sa, deoarece vă permite să setați absolut orice marker sub forma unei imagini. Mai jos este cum va arăta codul nostru în browser:

  

  Principala parte pozitivă a acestei metode este compatibilitatea 100% între browsere, dar, în ciuda acestui fapt, există un mic dezavantaj. Utilizarea unei imagini este un apel suplimentar către server.

  Markere cu înainte

  Există o opțiune când te poți descurca fără poză, dacă condițiile de proiectare o permit. Acest lucru este foarte des permis în proiectarea conținutului principal, atunci când lista este marcată cu cele mai simple elemente, cum ar fi un pătrat () sau o săgeată (→). Astfel, am ajuns la punctul că orice caracter special potrivit poate acționa ca un marker.

  În plus, se pune întrebarea cum să inserați caractere speciale în elementele listei. Desigur, nu manual, altfel ar fi un proces foarte lung și plictisitor, plus orice altceva și laborios. Pentru a ieși din această situație, ne va ajuta pseudo-elementul inainte de, a cărui aplicație se leagă de un anumit selector, ceea ce ne permite să ne automatizăm procesul de atribuire a markerilor din caractere speciale. Această soluție este potrivită pentru majoritatea browserelor, ținând cont de faptul că pentru IE, va fi precizată expresie.

  Mai jos este un exemplu de cod care generează o listă prescurtată cu marcatori:

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

  În practică, obținem următoarea imagine:

  

  Permiteți-mi să vă reamintesc că, în condiții reale, hack-urile sunt legate de comentarii condiționate.

  Când utilizați această metodă, principalul lucru este să cunoașteți codificarea pictogramei necesare. De asemenea, este de remarcat faptul că pentru expresie, caracterele speciale sunt scrise cu o combinație numerică sau un cod mnemonic. În ceea ce privește proprietatea conținutului, în acest caz, se pune mai întâi o bară oblică, apoi se scrie codul hexazecimal.

  Folosind insertAdjacentHTML

  Metoda de mai sus nu funcționează întotdeauna corect în legendarul IE (în ciuda hack-ului). Mai exact, „cârjele” pentru acest browser nu sunt complet finalizate. O metodă mai eficientă se bazează pe insertAdjacentHTML, mai jos este codul pentru această metodă:

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

  Markeri desenați cu proprietăți CSS

  Unii marcatori pătrați pot fi desenați folosind unele proprietăți CSS. De exemplu, un pătrat cu umplere colorată este desenat prin proprietatea culoare de fundal, iar un pătrat sub formă de chenar este desenat prin chenar (apropo, un pătrat cu umplutură poate fi desenat în acest fel). Un exemplu de scriere într-un fișier CSS:

  li ( // z-index: expresie (runtimeStyle.zIndex = 1, acest. innerHTML = "

  " + asta. innerHTML) / * hack pentru ue6 și 7 * /) li: înainte,. listMarkerBackColor (culoare fundal: # 539127; lățime: 7px; înălțime: 7px; conținut: ""; float: stânga; margine: 6px 6px 0 0; overflow: ascuns;) html. listMarkerBackColor (marja-dreapta: 1px; / * remediați jamba mică în IE6 * / }

  Astfel, un marker desenat cu proprietăți CSS va arăta astfel în practică:

  

  Utilizarea înainte și primul copil împreună

  Această metodă este adesea folosită la decorarea pesmeturilor de pâine pe site. Cine nu știe despre ce este vorba, uită-te la exemplul de mai jos.

  

  În acest caz, fiecare legătură este separată una de alta printr-un caracter special, dar nu ar trebui să existe niciun caracter special înaintea primului element. Pseudoclasa ne va ajuta cu asta. primul copil care se referă doar la primul articol din listă. Sub formă de cod, ar trebui să arate așa

  HTML
  

  < ul> < li>< a href= "#" >Acasă < li>< a href= "#" >Blog < li>< a href= "#" >CSS < li>Cod valid când se utilizează target = "_blank"

  li: înainte (conținut: " \21 92" ; ) li: primul copil: înainte (conținut: "";)

  De asemenea, este de remarcat faptul că această tehnică este utilizată nu numai pentru pesmet, ci și pentru listele obișnuite cu marcatori, în funcție de sarcina de proiectare.

  În ce browsere funcționează?

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

  concluzii

  Rezumând, putem observa faptul că utilizarea pseudo-elementului înainte este justificată și rațională în conținutul principal, deoarece nu există cerințe speciale pentru proiectarea listelor. Acest lucru, la rândul său, va reduce sarcina de pe server, în comparație cu opțiunea când este utilizată o imagine. Și dacă rețineți și faptul că pot exista o mulțime de liste cu marcatori în conținutul principal, atunci diferența poate deveni mai semnificativă. Dar imaginile sunt semnificativ mai bune în ceea ce privește deciziile de proiectare a markerului.