O listă specifică. Listă cu puncte

Listă cu puncte este definit prin adăugarea unui mic marcator, de obicei un cerc umplut, în fața fiecărui element din listă. Lista în sine este formată folosind un container

, iar fiecare element din listă începe cu o etichetă
• așa cum se arată mai jos.
  • Primul punct
  • Al doilea punct
  • Al treilea punct

  Eticheta finală trebuie să fie prezentă în listă.

Exemplul 11.1 oferă HTML pentru adăugarea unei liste cu marcatori la o pagină web.

Exemplul 11.1. Creați o listă cu marcatori

• Cheburashka
• Crocodilul Gena
• Shapoklyak
• Șobolanul Larissa

Rezultat acest exemplu prezentată în fig. 11.1.

Orez. 11.1. Vizualizare listă cu marcatori

Observați căptușeala din partea de sus, de jos și din stânga listei. Astfel de liniuțe sunt adăugate automat.

Markerii pot fi de trei tipuri: cerc (implicit), cerc și pătrat. Atributul tip al etichetei este folosit pentru a selecta stilul de marcare.

. Valori valide sunt date în tabel. 11.1
Tab. 11.1. Enumerați stilurile de marcatori

Tip de listă	cod HTML	Exemplu
Lista cu gloanțe sub formă de cerc		Primul Al doilea Al treilea
Lista cu gloanțe sub formă de cerc		Primul Al doilea Al treilea
Lista cu marcatori pătrați		Primul Al doilea Al treilea

Aspectul markerilor poate varia ușor în diferite browsere, precum și atunci când se schimbă fontul și dimensiunea textului.

Crearea unei liste cu marcatori pătrați este prezentată în Exemplul 11.2.

Exemplul 11.2. Tip marker

Schimbarea convingerilor

• schimbarea credinței religioase (opțional: budism, confucianism, hinduism). Oferta speciala- Iudaismul și Islamul împreună;
• o schimbare a credinței în infailibilitatea părții iubite;
• credința că extratereștrii există;
• preferinta pentru sistemul politic ca fiind cel mai bun de acest gen (optional: feudalism, socialism, comunism, capitalism).

Rezultatul acestui exemplu este prezentat în Fig. 11.2.

Listele sunt utilizate în mod activ pentru numerotare automată blocuri de conținut. Cu toate acestea, atunci când utilizați liste imbricate, nu puteți obține numerotarea subclauzelor precum 1.1, 1.2, 1.3, deoarece fiecare listă va fi independentă. Dar ceea ce este imposibil în STML poate fi atribuit stilurilor.

Mai întâi, să aruncăm o privire la cum să creați liste imbricate în general. Containerul principal este eticheta

, iar elementele din listă sunt formate din etichete
1. ... Lista imbricată începe, de asemenea, cu
   , dar această etichetă trebuie să fie amplasată în interiorul containerului
   1. , așa se respectă sintaxa corectă (exemplul 1).

      Exemplul 1. Listă imbricată normală

      
      
      
      
      
      
      
      

      
      
      1. Paragraful 1
         
         
         
         1. Subclauza 1.1
         
         
         2. Subclauza 1.2
         
         
         3. Subclauza 1.3
         
         
         
         
      
      
      2. Punctul 2
         
         
         
         1. Subclauza 2.1
         
         
         2. Subclauza 2.2
         
         
         
         
      
      
      
      
      

      Rezultatul acestui exemplu este prezentat în Fig. 1. Vă rugăm să rețineți că numerotarea listelor imbricate începe de fiecare dată.

      Orez. 1. Vedere listă imbricată

      Acum să eliminăm numerotarea încorporată a listelor și să o creăm conform uneia noi, dar în forma de care avem nevoie. Acest lucru necesită trei atribute de stil: contra-resetare, contra-incrementare și conținut.

      counter-reset - setează o variabilă care va stoca valoarea contorului;

      counter-increment - crește sau scade valoarea contorului cu numărul specificat;

      conținut - Imprimă valoarea contorului când se folosește argumentul contorului (variabilă). Funcționează împreună cu pseudoelementele de după sau înainte.

      Pentru lista de primul nivel, vom numi variabila contor list1, iar pentru al doilea nivel - list2. Apoi inițierea contoarelor pentru liste va fi după cum urmează.

      OL (contor-resetare: list1;) / * Lista de primul nivel * /
      OL OL (contor-resetare: list2;) / * Lista de al doilea nivel * /

      V în acest caz Selectorii de context ajută la separarea listei imbricate de cea externă. Construcția OL înseamnă aplicarea stilului numai etichetei

      , dar numai atunci când se află în interiorul unei alte etichete
      .

      Creșterea valorii contorului are loc prin selectorul OL LI: before, la care se adaugă atributele de contra-increment și stil de conținut. Atributul de contor-increment cu valoarea list1 incrementează acest contor cu unu și conținut: counter (list1) "." Imprimă valoarea contorului înaintea articolului din listă. Aceste atribute funcționează în perechi, așa că trebuie să le activați în același timp.

      OL LI: înainte ( / * Lista de primul nivel * /
      contra-increment: list1;
      / * Afișează valoarea ca 1., 2. * /
      }
      OL OL LI: inainte ( / * Lista de al doilea nivel * /
      contra-increment: list2; / * Creșteți valoarea contorului * /
      }

      Pentru lista imbricată, folosim din nou selectori contenciosi (OL OL) și folosim simultan ieșirea contorului list1 și list2, în acest caz vom obține numerotarea tipului de care avem nevoie.

      Codul final este prezentat în exemplul 2.

      Exemplul 2. Liste imbricate cu numerotare automată

      
      
      
      
      
      
      
      
      

      
      
      1. Paragraf
         
         
         
         1. Subparagraf
         
         
         2. Subparagraf
         
         
         3. Subparagraf
         
         
         
         
      
      
      2. Paragraf
         
         
         
         1. Subparagraf
         
         
         2. Subparagraf
         
         
         
         
      
      
      
      
      

      Rezultatul acestui exemplu este prezentat în Fig. 2.

      

      Orez. 2. Vizualizarea auto-numerării listei în browser-ul Opera

      cometariu

      Exemplul de mai sus nu funcționează în browser Internet Explorer până la versiunea 7, inclusiv, deoarece nu acceptă niciuna dintre proprietățile de stil de mai sus.

      Deoarece browserul Internet Explorer nu acceptă multe atribute de stil interesante, numerotarea obișnuită în liste ar trebui lăsată neatinsă special pentru acesta. Pentru a face acest lucru, eliminați list-style-type: none. Dar acest lucru va afecta și alte browsere în care exemplul funcționează corect, așa că trebuie să îl aplicați într-un hack - aceasta este tehnica atunci când browsere diferite este dat un cod de stil diferit. De exemplu, puteți utiliza eticheta! Important. Când adăugați! Important pentru valoarea unui atribut de stil, importanța acestuia crește. Dacă redefiniți valoarea aceluiași atribut fără! Important, acesta va fi ignorat de browsere. Dar nu pe internet Versiunea Explorer 6 și mai jos.

      LI (
      list-style-type: niciunul! important; / * Eliminam numerotarea din browserele Opera, Safari, Fire Fox * /
      list-style-type: zecimal; / * Lăsați numerotarea în browserul IE6 și mai jos * /
      }

      Înlocuind aceste coduri cu linia de selecție LI din exemplul 2, obținem o listă imbricată care funcționează corect în toate browserele.

      Listele numerotate sunt o colecție de articole cu acestea numere de serie... Tipul și tipul numerotării depind de atributele etichetei

      , care este folosit pentru a crea lista. Fiecare articol dintr-o listă numerotată este identificat printr-o etichetă
      1. așa cum se arată mai jos.
         1. Primul punct
         2. Al doilea punct
         3. Al treilea punct

         Dacă nu specificați niciun atribut suplimentar și scrieți doar eticheta

         , atunci implicit este o listă cu numere arabe (1, 2, 3, ...), așa cum se arată în Exemplul 11.3.

         Exemplul 11.3. Creați o listă numerotată

         Lucrul cu timpul

         1. crearea punctualității (nu vei întârzia niciodată la nimic);
         2. recuperarea de la punctualitate (nu te grăbi nicăieri);
         3. schimbând percepția asupra timpului și orelor.

         Rezultatul acestui exemplu este prezentat în Fig. 11.3.

         Orez. 11.3. Vizualizare listă numerotată

         Rețineți că lista numerotată adaugă și indentări automate în partea de sus, de jos și din stânga textului.

         Următoarele valori pot fi folosite ca elemente de numerotare:

         • numere arabe (1, 2, 3, ...);
         • litere mari latine (A, B, C, ...);
         • litere latine mici (a, b, c, ...);
         • numere romane majuscule (I, II, III, ...);
         • numere romane mici (i, ii, iii, ...).

         Atributul tip al etichetei este folosit pentru a indica tipul listei numerotate.

         ... A lui valori posibile sunt date în tabel. 11.2.
         Tab. 11.2. Tipuri de liste numerotate

         Tip de listă	cod HTML	Exemplu
         numere arabe		1. Ceburașka 2. Crocodil Gena 3. Shapoklyak
         Litere mari alfabet latin		A. Cheburashka B. Crocodil Gena C. Shapoklyak
         Litere mici ale alfabetului latin		A. Cheburashka b. Crocodilul Gena c. Shapoklyak
         Numere romane majuscule		I. Cheburashka II. Crocodilul Gena III. Shapoklyak
         numere romane în literă mică		i. Cheburashka ii. Crocodilul Gena iii. Shapoklyak

         Pentru a începe lista la o anumită valoare, utilizați atributul start al etichetei

         ... Nu contează ce tip de listă este setat folosind type, atributul start funcționează la fel cu numerele romane și arabe. Exemplul 11.4 arată cum să creați o listă folosind numere romane majuscule care încep cu opt.

         Exemplul 11.4. Numerotarea listei

         8. Regele Magnum XLIV
         9. Regele Siegfried al XVI-lea
         10. Regele Sigismund XXI
         11. Regele Husbrandt I

         Rezultatul acestui exemplu este prezentat în Fig. 11.4.

         

         Orez. 11.4. Lista numerotata cu numere romane

         V limbaj HTML Există două tipuri de liste: numerotate și nenumerotate. Creația lor este aproape aceeași. Chiar și etichetele diferă cu un caracter. De asemenea, puteți crea care să includă atât puncte numerotate, cât și marcatori.

         Puteți transforma aceste liste după cum doriți. Totul depinde de imaginația ta. Vom lua în considerare mai întâi liste standard, la fel ca în Editor de cuvinte, iar apoi le vom îmbunătăți și proiecta dincolo de recunoaștere.

         Lista HTML numerotata

         Unul numerotat obișnuit poate fi creat folosind următoarele etichete:

         1. Primul articol de pe listă
         2. Al doilea articol de pe listă
         3. Al treilea articol de pe listă

         Listele simple arată așa

         Conform standardelor, fiecare articol din listă ar trebui să fie în interiorul etichetelor de deschidere și de închidere. Dar dacă nu puneți o etichetă de final, atunci rezultatul va fi exact același. Manipulatorul este destul de inteligent. În timpul transformării listei, analizează etichetele de deschidere. Dacă vede unul nou

         4. , apoi pune automat
         .

         Astfel, listele pot fi făcute așa cum se arată mai jos.

         

         Dar din punctul de vedere al profesioniștilor, acest lucru este incorect.

         

         Listele nenumerotate (sau marcatori) sunt create în același mod, cu excepția faptului că în locul etichetei ol, scrieți ul.

         Nu există numere sau litere - doar diferite simboluri numite markeri.

         

         Lista numerotată HTML pe mai multe niveluri

         Mulți utilizatori sunt interesați de această posibilitate. Prin urmare, trebuie remarcat faptul că orice listă numerotată HTML poate fi pe mai multe niveluri. Niveluri suplimentare poate fi la fel sau etichetat.

         

         Pentru a crea lista prezentată în exemplul de mai sus, trebuie să scrieți următoarele.

         

         Rețineți că în acest cod, spre deosebire de primele exemple, a fost adăugat atributul type. Datorită acesteia, puteți specifica tipul de sortare atât pentru listele numerotate, cât și pentru cele marcate.

         Pentru cele numerotate, indicați alfabetul sau tipul de numere, iar pentru alte cazuri - tipul de marcaj.

         Dacă utilizați etichetă HTML specială, lista numerotata poate deveni orice vrei tu.

         Puteți specifica atributul tip cu orice valoare din tabel. Sau, în clasa de stil css, specificați tipul de stil de listă cu tipul de sortare dorit.

         

         Traducerea semnificațiilor este destul de simplă. Suficient cunostinte de baza în limba engleză... Dar chiar dacă nu puteți traduce cuvintele „cerc”, „pătrat”, etc., puteți înțelege vizual care va fi rezultatul când specificați aceste valori în atributul tip.

         Pentru liste numerotate, utilizați următoarele opțiuni:

         • 1 - cifre arabe;
         • A - majuscule;
         • a - litere latine mici;
         • I - cifre romane majuscule;
         • i - cifre romane mici.

         Valoarea implicită este întotdeauna o listă cu. Adică, dacă nu ați specificat nimic, este echivalent cu tip = "1".

         În plus, puteți începe liste numerotate din orice poziție doriți. Implicit - ieșire de la 1. Dar dacă doriți, puteți începe cu cel puțin o sută. Pentru a face acest lucru, trebuie să specificați atributul start cu orice valoare.

         

         În plus, putem concluziona în ordine inversă... Pentru a face acest lucru, trebuie să scrieți invers.

         

         Designul listei

         O listă HTML numerotată poate fi proiectată atât de frumos încât nu este imediat posibil să ghiciți că este lista obisnuita, nu o poză făcută în Photoshop.

         Iată câteva exemple de liste frumoase.

         

         După cum puteți vedea din exemplu, puteți schimba aspect numerotarea și elementele în sine.

         Puteți crea o listă obișnuită ca aceasta.

         

         În stilurile CSS, trebuie să specificați stilul pentru etichetele vechi. Rețineți că, în acest caz, setările vor fi aplicate tuturor listelor din întregul site unde este utilizat acest fișier de stil.

         

         Să luăm în considerare mai întâi opțiunea cu un design de listă rotundă. Reveniți la codul listei. Lista rotunjită a clasei este specificată acolo. Tocmai cu această clasă trebuie să mânuiești pentru a face o asemenea frumusețe. Puteți numi clasa cum doriți.

         

         

         

         Acum să aruncăm o privire asupra designului pătrat.

         

         Stilurile sunt destul de asemănătoare. Diferența este că, în primul caz, elementul este rotunjit folosind capabilități css.

         Un designer profesionist de layout trebuie să anticipeze și să înțeleagă că nu toți utilizatorii folosesc calculatoare moderne... Nu toată lumea are instalat Windows 7, 8, 10. Există un procent de utilizatori care încă folosesc Windows XP și folosesc versiuni mai vechi. motor de cautare Explorator.

         De regulă, aproape toate îmbunătățirile de design moderne ale elementelor nu sunt susținute de acestea. Utilizatorul va simți că designul site-ului web nu a fost lucrat deloc. Că totul s-a mutat. Elementele se ciocnesc unele de altele. Pentru a evita acest lucru, trebuie să calculați toate opțiunile.

         Unii webmasteri închid ochii la ei, deoarece cota lor de piata moderna devine din ce în ce mai mic. Dar pentru un profesionist, fiecare vizitator este important, mai ales dacă este un site comercial.

         Faceți ceva potrivit pentru toată lumea sau luați în considerare toate opțiunile de browser.

         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 curs despre Bazele HTML... Inainte de a citi această lecție Vă recomand să treceți prin 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, explicatie detaliata pentru părți separate text. Dar să vedem cum arată listele cu marcatori în cod:

         Și așa arată în browser:

         Orez. 1.1. Vedere standard Lista neordonată 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 atribut tipși l-am dat 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ă împărțire clară CSS (citește ce este CSS) și HTML. HTML este pentru marcaj și CSS pentru aspectul bun.

         Cod care contine atribut dat, la specificarea tipului document 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 și apoi să luăm în considerare listele imbricate și mai multe exemple gata făcute care sunt folosite cel mai des pe site-uri reale.

         2. Liste numerotate în HTML

         Spre deosebire de tipul anterior de liste, listele numerotate au una caracteristică importantă: se numesc automat. Acest lucru este util atunci când trebuie făcută numerotarea. lista 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>

         Așa arată o listă numerotată setări standard in 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
         Markere cu litere mici litere latine	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 de la număr arbitrarîntr-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 pe niveluri cu numerotate și etichetate după cum urmează:

         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 cod sursași sunt împărțite în file HTML (structură), CSS (stiluri) și Rezultate (rezultat).

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

         Transformarea listei HTML în șir poate fi necesară la creare meniu orizontal... Este foarte simplu să o faci:

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

         Responsabil pentru asta proprietate de tip list-style-typeîn CSS (mai multe detalii):

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

         Elementul din listă este element bloc deci trebuie centrat cu marginile... Dar există unul 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 proprietate CSS număr de coloane (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ă: