Ce face ul tag-ul. Liste numerotate în HTML

02.04.2019 In contact cu

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

așa cum se arată mai jos.
- Primul punct
- Al doilea punct
- Al treilea paragraf
Lista trebuie să conțină o etichetă de închidere.

, altfel va apărea o eroare. Etichetă de închidere deși nu este obligatoriu, vă recomandăm să îl adăugați întotdeauna pentru a separa clar elementele listei.

Exemplul 11-1 este codul HTML pentru adăugarea unei liste cu marcatori la o pagină web.

Exemplul 11.1. Creați o listă cu marcatori

listă cu puncte

Cheburashka
Crocodilul Gena
Shapoklyak
Sobolanul Larisa

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 lua una din trei forme: cerc (implicit), cerc și pătrat. Atributul tip al etichetei este folosit pentru a selecta stilul de marcare.

Valori valide

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 gloanțe pătrate		Primul Al doilea Al treilea

Markerii pot varia ușor în funcție de browsere diferite, precum și atunci când schimbați fontul și dimensiunea textului.

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

Exemplul 11.2. Tip de markere

listă cu puncte

Schimbarea Convingerilor

schimbarea credinței religioase (la alegere dintre: 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 un sistem politic, ca cel mai bun de acest gen (la alegere dintre: feudalism, socialism, comunism, capitalism).

Rezultatul acestui exemplu este prezentat în Fig. 11.2.

Bună ziua, dragi cititori ai site-ului blogului. Astăzi, sub acest titlu, vreau să vorbesc despre diversele liste HTML care pot fi create pe baza etichetelor UL, OL, LI și DL special concepute pentru asta. Cu ajutorul unei perechi de UL și LI se creează liste marcate, cu ajutorul OL și LI - liste numerotate, iar cu ajutorul elementelor DL, DT și DD se creează așa-numitele liste de definiții. De asemenea, vom lua în considerare pe scurt principiile creării structurilor imbricate.

Vreau să vă reamintesc că am reușit deja să vorbim despre elementele de bază ale modernului, precum și despre aspectul tabelar (). În plus, am atins elementele de bază, ei bine, am învățat prin intermediul.

Liste cu marcatori bazate pe etichetele UL și LI

Eticheta UL este folosită pentru a crea liste cu marcatori, iar eticheta OL este folosită pentru a crea liste numerotate. Aceste etichete sunt împerecheate și blochează etichete, la fel ca elementul LI.

Între etichetele de deschidere și de închidere sunt elemente de listă separate, care, la rândul lor, sunt incluse în elementul LI de deschidere și de închidere. În partea de sus și de jos a listelor HTML, browserul adaugă indentare pe o singură linie, similară cu indentarea creată de eticheta de paragraf.

Să vedem, de exemplu, o versiune etichetată care ar putea arăta astfel:

Prima linie
Al doilea
Ultimul element

În interiorul etichetelor UL de deschidere și de închidere pot fi plasate doar elemente LI, iar în interiorul acestor elemente (paragrafe) puteți introduce orice conținut (text, imagini, titluri, paragrafe, link-uri și chiar alte liste).

Acestea. UL servește doar la organizarea unei liste etichetate (necomandate) și a tot ceea ce veți vedea pe pagină webîn interiorul acestuia este implementat folosind conținutul elementelor LI.

Pentru UL, puteți schimba tipul de marker scriind în el sensuri diferite pentru atributul „Tip”. Dacă „Tipul” (gestionarea aspectului marcatorilor) pentru elementul UL nu este specificat, atunci va fi afișat tipul de marcator implicit (discul este un cerc umplut cu culoarea textului):

În exemplele de mai sus, am scris atributul „Tip” pe elementul UL folosind tipul dat markere pentru toate articolele. Dar atributul „Tip” poate fi scris și pentru fiecare etichetă LI individuală, setând propriul tip de marcator pentru acest articol.

Un exemplu de listă cu marcatori cu tipuri variate marker pentru fiecare articol:

Marker de disc umplut
Marker sub forma unui disc neumbrit
Pătrat

Liste numerotate în HTML pe baza etichetei OL

Pentru a crea o listă numerotată se folosesc etichete OL, în interiorul cărora, din nou, vor fi amplasate elemente LI. OL și LI, așa cum am menționat deja, sunt la nivel de bloc (adică tind să ocupe tot spațiul disponibil în lățime) și nimic nu poate fi plasat în interiorul OL, cu excepția elementelor LI.

Se pare că OL și UL sunt etichete de serviciu care sunt necesare doar pentru a spune browserului ce fel de listă formăm (marcate sau numerotate). În cazul unuia numerotat, în stânga fiecărui element vom vedea nu un marker, ci un număr și un punct în spatele lui:

Prima linie
Al doilea punct
A treia linie

După cum am menționat mai sus, elementele UL, OL și LI au capacitatea de a utiliza atributul TYPE. Vă permite să setați tipul de marcator sau să specificați cu ce numere sau litere vor fi numerotate articolele din listă. Pentru o listă ordonată, parametrii acestui atribut pot lua următoarele valori:

litere mari

- cifre romane minuscule;

Un exemplu de listă numerotată cu diferite tipuri de numerotare pentru fiecare articol:

numerotate cu cifre romane mari
Numerotarea cu litere mici latine
Numerotarea cu cifre romane mici

La crearea listelor numerotate, este posibil să începeți numerotarea nu de la unul, ci de la numărul specificat în atributul START. De exemplu:

Primul element al cărui număr este specificat în eticheta OL prin atributul start="23"
Următorul articol, cu încă un număr unu
Inca una

Pentru OL, puteți începe o nouă numerotare de la orice valoare, începând de la orice articol, prin scrierea atributului VALOARE cu numărul necesar în LI de deschidere a acestui articol. De exemplu:

Primul articol numărul unu
Acest element va primi numărul specificat în atributul value="32"
Articol cu un număr mare

Stilul aspectului listelor în CSS ( foi de stil)

Dar de obicei acum aspect markerii sunt setati nu prin atributul TYPE, ci , pentru care sunt scrise proprietatile corespunzatoare.

Aici voi da doar un exemplu de diverși marcatori pentru liste neordonate, al căror aspect este specificat prin dosar separat cu foi de stil în cascadă.

Primul punct
Al doilea
Ultimul

Dar despre asta vom vorbi în articolele viitoare. Așa este stabilită apariția markerilor pentru UL pe acest blog. Imaginile sunt folosite ca marcatori: pentru articolele obișnuite ale unei liste nenumerotate — , pentru articolele imbricate ale unei liste nenumerotate — .

Liste speciale și imbricate în cod HTML

Al treilea și ultimul tip se numește „liste de definiții” și sunt setate folosind trei etichete - DL, DT și DD. DL-ul spune browserului că va urma o listă de definiții.

De obicei, acest tip este folosit (sau trebuia să fie folosit) pentru a scrie intrări de dicționar constând din termeni (incluși în etichetele DT) și descrierile acestora (incluse în etichetele DD).

Primul termen: Descriere
Al doilea mandat: Descrierea lui

Dacă te uiți la exemplul de mai sus, vei observa că elementul DD (descrierea termenului) este deplasat (cu 40px) față de elementul DT (termenul însuși).

În general, DL, DT și DD sunt bloc etichete, în plus, în interiorul elementului DT, puteți introduce doar conținut cu etichete inline(se dovedește că elementele bloc ale titlurilor și paragrafelor nu pot fi utilizate în interiorul DT). Și în interiorul etichetelor DD, puteți insera orice elemente, atât inline, cât și bloc.

listă imbricatăîn Html este creat prin analogie cu unul simplu, dar în lista principală, unele dintre articole sunt din nou incluse în eticheta UL sau OL de deschidere și de închidere.

Vă rugăm să rețineți că LI-ul de închidere a articolului în care va fi creat elementul imbricat este plasat numai după întregul cod al listei imbricate (acest lucru este foarte important pentru afișarea corectă a acestuia pe pagina web). Lista imbricată ar putea arăta cam așa:

Primul paragraf al principalului numerotat
Al doilea punct
- Primul element din imbricat etichetat
- Al doilea
- Al treilea și ultimul punct al marcat
Al treilea element al numerotat

Multă baftă! Ne vedem curând pe site-ul paginilor blogului

Puteți viziona mai multe videoclipuri accesând

");">

S-ar putea să fiți interesat

Cum să lipiți link HTML si o poza (foto) - etichete img si A
Formulare HTML pentru site - etichete Form, Input and Select, Option, Textarea, Label și altele pentru crearea elementelor de formular web Selectați, Opțiune, Zona de text, Etichetă, Set de câmpuri, Legendă - Etichete HTML din formularul de listă verticală și câmp de text
Cum sunt setate culorile în codul Html și CSS, selecția nuanțelor RGB în tabele, rezultatele Yandex și alte programe
Încorporați și obiectați Etichete HTML pentru a afișa conținut media (video, flash, audio) pe paginile web
Etichete și atribute de antet H1-H6, linie orizontală Hr, ruptură de linie Br și paragraful P conform standardului Html 4.01
Tabele în HTML - etichete Table, Tr și Td, precum și Colspan, Cellpadding, Cellspacing și Rowspan pentru a le crea

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ă, etichete principale 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 se aplică listele și în ce circumstanțe pot fi utilizate.

Acest articol este al treilea din acest curs scurt despre elementele de bază ale HTML. Inainte de a citi această lecție Vă recomand să treceți prin cele două anterioare:

Articolul tocmai a început și puteți observa 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. Mai târziu în articol, vom arunca o privire mai atentă la ce sunt markerii, cum să faci numere și, de asemenea, cum să-ți faci propriul marker.

Î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 listă este folosit pentru a enumera în text un set de elemente similare ca valoare. 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 a unei liste HTML neordonate cu marcatori într-un browser

1.1 Marcatori standard pentru o listă cu marcatori

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

1.2 Marcator de listă sub forma unui 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 ales a doua valoare „cerc” pentru atribut tipși setați-o în lista noastră cu marcatori:

<html> <cap> <titlu > Un exemplu de listă cu marcatori cu un marcator cerc gol</titlu> </cap> <corp > Stele: <ultype="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 a marcatorului pentru listă sub formă de cerc în browser

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

Să ne uităm și la ultimul exemplu cu un marcator pătrat pentru o listă HTML:

Atenție la marcaj, acesta a devenit pătrat:

Orez. 1.3. Vedere a marcatorului pentru listă sub forma unui pătrat în browser

Notă importantă: această metodă nu mai este folosită pentru stilarea listelor cu marcatori. Există separare clară CSS (citește ce este CSS) și HTML. HTML este pentru marcaj, iar CSS pentru crearea unui aspect atractiv.

Codul care contine atribut dat, la specificarea tipului documentul curent ca HTML5(""), va da o eroare în timpul validării. Dacă nu ați auzit ce este validarea, atunci sunteți aici - .

Eroarea va fi următoarea:

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

Ne-am dat seama de listele cu marcatori. Acum să trecem la listele numerotate și apoi să luăm în considerare listele imbricate și câteva 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ă: au pus automat numerotarea. Acest lucru este util atunci când trebuie să numerotați lista mare. Manual, va dura mult timp și puteți încă să vă rătăciți. Lista numerotată este specificată folosind eticheta. Cum arată în practică:

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 > De la unu la cinci: <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 implicite in browser:

Orez. 2.1. Lista numerotată în browser cu setări standard

La fel ca predecesorul său (lista cu marcatori), are propriile stiluri de afișare a numerelor. Numerotarea normală nu este singurul tip de marcatori dintr-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 sub formă de numere arabe	1	Badminton Baseball
Markere în linie litere latine	A	Chomolungma Chogori Kanchenjunga
Marcatori sub formă de litere mari latine	A	Summit Plummet Aleea Tantrumului Nebun
Marcatori cu cifre romane minuscule	i	Marea Filipinelor Marea Arabiei mare de corali
Marcatori cu cifre romane majuscule	eu	roșu Verde Albastru

2.2 Numerotare proprie în lista HTML

Pe lângă rezultatul obișnuit al unei liste numerotate, ne putem începe numerotarea de la orice număr. Pentru a face acest lucru, trebuie să setați un atribut suplimentar „start” . Această numerotare funcționează pe 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 personalizată pentru o listă numerotată</titlu> </cap> <corp > Începem să numărăm de la douăsprezece: <oltype="a"start="12"> <li > Doisprezece</li> <li > Treisprezece</li> <li > Paisprezece</li> <li > Cincisprezece</li> <li >Şaisprezece</li> </ol> </corp> </html>

Iată cum ar apărea pe un site real:

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.

Acum să trecem la listele HTML imbricate.

3. Cum să faci o listă cu mai multe niveluri (imbricate) în HTML

Listele pe mai multe niveluri sunt folosite pe site în crearea meniurilor. 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 exemplul modelelor de mașini, 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 HTML imbricată</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ă lista pe mai multe niveluri în browser:

Orez. 3.1. Exemplu de listă stratificată în HTML

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

Dar ne putem uni liste pe mai multe 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 stratificate î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 Terry</li> </ul> </li> </ol> </li> </ul> </corp> </html>

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

Să vedem cum arată în browser:

4. Listări HTML utile

Acestea sunt informații care necesită înțelegerea proprietăților CSS. Pentru a face acest lucru, recomand să studiați următoarele lecții:. Toate exemplele vor fi imediat cu cod sursași împărțit în file HTML (structură), CSS (stiluri) și Rezultat (rezultat).

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

Crearea unei liste HTML într-un șir poate fi necesară la creare meniu orizontal. A-l face este foarte simplu:

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

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

4.3 Cum să centrați o listă în HTML

Elementul listă este un element bloc, deci trebuie să fie centrat folosind 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ă proprietate CSS list-style-image. În interiorul adresei URL, specificați adresa pictogramei. Vreau doar să remarc că este mai bine să alegeți imediat o imagine mică, deoarece înălțimea liniei de listă depinde de aceasta:

4.5 Marcator personalizat HTML pentru listă cu marcatori

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

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

Pentru a face lista în mai multe coloane vom folosi proprietate CSS număr de coloane (proprietatea 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 o înălțime pentru ca lista să vadă împărțirea în mai multe coloane:

5. Exersează cu liste

În videoclipul de mai jos puteți vedea toată lucrarea de la liste HTML la practica:

liste standard

vedere standard

Pe baza elementelor de bază, vom arunca acum o privire mai atentă asupra elementelor folosite pentru a oferi structură și semnificație diverse părți proiecta. Dacă cineva nu știe, atunci ul și li, asta este mult cel mai bun mod decât simplu text text pentru că atunci când textul se împachetează, mai ales în telefon mobil, este perfect indentat și nu se înfășoară în jurul markerului.

Listele sunt considerate a fi metodă grozavă prezentarea informațiilor pe pagini pentru că sunt ușor de citit și arată bine. Mulți oameni par să creadă că punctele marcante sunt imagini mici, dar de fapt toate sunt create printr-o a html simplu Codul. Puteți lipi tipuri diferite listele între ele, dacă doriți, nu uitați să le închideți corect. Vă puteți juca cu textul dorit în toate aceste comenzi din listă.

De asemenea, trebuie să știți că listele conțin inițial mai multe elemente:

1 . informatii neordonate.
2 . Informații comandate.
3 . Definiții.

Să începem instalarea:

1. Opțiune:

Element din listă

Lista unică

Listări originale

ZORNET.RU - Webmaster

O altă listă

(Ksangelopan)
marjă: 19px 0 0;
umplutura:0;
stil-listă: niciunul;
counter-reset:li;
}
.ksangelopan li (
chenar: 2px solid #3575ad;
fundal: #d7dee4;
poziție: relativă;
margine-jos: 17px;
umplutură: 15px 9px;
}
.ksangelopan li:hover(
indicele z: 1;
}
.ksangelopan li:before (
chenar: 2px solid #2270b3;
poziție: absolută;
sus: -14px;
umplutură: 3px 9px;
dimensiunea fontului: 11px;
greutatea fontului: bold;
culoare: #246eaf;
fundal: #f2f4f7;
contra-increment: li;
continut: counter(li);
-webkit-durata-tranzitie: 0.4s;
tranziție-durată: 0,4s;
}
.ksangelopan li:hover:before (
fundal: #2672b3;
culoare: #f7f9fb;
-webkit-transform: translate(-11px, 0);
-ms-transform: translate(-11px, 0);
-o-transform: translate(-11px, 0);
transforma: translate(-11px, 0);
}
.ksangelopan li:după (
continut: "";
poziție: absolută;
tranziție-durată: 0,3s;
-webkit-transition-property: latime;
proprietate-tranziție: lățime;
z-index: -1;
fundal: #FFF;
inaltime: 100%;
stânga: 0;
sus: 0;
latime: 0;
}
.ksangelopan li:hover:after (
latime: 100%
}

2 A doua opțiune:

Element din listă

Lista unică

Listări originale

ZORNET.RU - Webmaster

O altă listă

Beleduzlopamges (
margine-jos: 8px;
umplutura:0;
stil-listă: niciunul;
counter-reset:li;
}
.beleduzlopamges li (
poziție: relativă;
chenar: 2px solid #195588;
fundal: #eff3f7;
umplutură: 15px 19px 15px 27px;
margine: 12px 0 12px 40px;
-webkit-durata-tranzitie: 0.3s;
tranziție-durată: 0,3s;
}
.beleduzlopamges li:hover(
fundal: #FFF;
}
.beleduzlopamges li:before (
înălțimea liniei: 32px;
poziție: absolută;
sus: 4px;
stânga: -39px;
lățime: 39px
text-align: centru;
dimensiunea fontului: 16px;
greutatea fontului: bold;
culoare: #f9f5f5;
fundal: #275b88;
contra-increment: li;
continut: counter(li);
tranziție-durată: 0,2s;
}
.beleduzlopamges li:hover:before (
lățime: 46px;
}
.beleduzlopamges li:după (
poziție: absolută;
stânga: 0;
sus: 4px;
continut: "";
inaltime: 0;
latime: 0;
chenar: 16px solid transparent;
chenar-stânga-culoare: #275b88;
-webkit-durata-tranzitie: 0.2s;
tranziție-durată: 0,2s;
}
.beleduzlopamges li:hover:after (
margine-stânga: 6px;
}

3 A treia opțiune:

Scripturi pentru uCoz

Șabloane pentru uCoz

Proiectare de site-uri

Stiluri pentru site

Stilizarea în CSS

Nizualisanelag (
umplutura:0;
stil-listă: niciunul;
counter-reset:li;
}
.nizualisanelag li(
poziție: relativă;
umplutură: 9px 17px 17px 25px;
margine-stânga: 39px;
tranziție-durată: 0,2s;
cursor: pointer;
greutatea fontului: bold;
culoare: #343638;
}
.nizualisanelag li:before (
chenar: 3px solid transparent;
înălțimea liniei: 35px;
poziție: absolută;
sus: 0;
stânga:-29px;
lățime: 41px;
text-align:center;
dimensiunea fontului: 14px;
greutatea fontului: bold;
culoare: #619dce;
contra-increment: li;
continut: counter(li);
tranziție-durată: 0,3s;

dimensionare cutie: chenar-cutie;
}
.nizualisanelag li:hover:before (
culoare: #337AB7;
}
.nizualisanelag li:după (
poziție: absolută;
sus: 0;
stânga: -29px;
lățime: 41px
înălțime: 41px;
chenar: 5px solid #468bd0;
raza de frontieră: 50%
continut: "";
opacitate: 0,5
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
dimensionare cutie: chenar-cutie;
}
.nizualisanelag li:hover:after (
animație: 500 ms ease-in-out 0s bounceIn;
opacitate: 1
}

@keyframes bounceIn(
0% {
opacitate: 0
transform: scale3d(.3, .3, .3);
}
20% {
transform: scale3d(1.3, 1.3, 1.3);
}
40% {
transform: scale3d(.9, .9, .9);
}
60% {
opacitate: 1
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transforma: scale3d(.97, .97, .97);
}
la(
opacitate: 1
transform: scale3d(1, 1, 1);
}
}

frumoasa animatie

4 A patra opțiune:

Primul element pentru site

Al doilea element pentru site

Al treilea element pentru site

Al patrulea element pentru site

Al cincilea element pentru site

umplutura:0;
stil-listă: niciunul;
}
.kudezamuden li(
umplutură: 6px;
}
.kudezamuden li:before (
umplutură-dreapta: 11px;
greutatea fontului: bold;
culoare: #4979a0;
conținut: „\2606”;
tranziție-durată: 0,4s;
}
.kudezamuden li:hover:before (
culoare: #235e90;
conținut: „\2605”;
}

versiunea anterioara

În general, aceasta selecție mică liste, va da webmasterului să facă o listă frumoasă pe portal, unde o poate aranja mai mult, așa cum dorește el însuși să o vadă.

Dacă trebuie să puneți articole într-o listă numerotată în loc de o listă cu marcatori, aici va fi folosit HTML ordonat. Această listă este creată folosind eticheta ol. Numerotarea începe de la unu și crește cu una pentru fiecare element de listă ordonat ulterior cu o etichetă li.

Liste HTML folosit pentru a grupa informații conexe. Există trei tipuri de liste:

listă cu puncte —

marcat cu un marker
lista numerotata —
1. marcat cu un număr
  lista de definitii— — constă din perechi de termeni
  —
  definiție.
  Fiecare listă este un container care conține elemente de listă sau perechi termen-definiție. Elementele de listă se comportă ca elemente de bloc, stivuite unul sub celălalt și ocupând întreaga lățime a blocului container. Fiecare element din listă are o casetă suplimentară pe partea care nu face parte din aspect.
  
  Crearea listelor HTML
  
  1. Lista cu marcatori
  
  listă cu puncte este o listă neordonată (din lista de neordonate în engleză). Creat cu etichetă asociată
  . Un marcator de element de listă este o etichetă, cum ar fi un cerc umplut.
  Browserele adaugă în mod implicit următoarea formatare în caseta de listă:
  Fiecare element al listei este creat folosind o etichetă pereche
2. (din limba engleză articol de listă).
- Microsoft
- Google
- măr
Orez. 1. Lista cu marcatori
2. Lista numerotata

lista numerotata creat folosind eticheta pair . Fiecare element din listă este creat și cu un element
. Browserul numerotează automat elementele în ordine, iar dacă unul sau mai multe elemente dintr-o astfel de listă sunt șterse, numerele rămase vor fi recalculate automat.
Blocul listă are, de asemenea, stilurile implicite de browser:
este disponibil atributul valoare, ceea ce vă permite să schimbați numărul implicit pentru elementul din listă selectat. De exemplu, dacă primul element din listă este setat la

, apoi restul numerotării va fi recalculată în raport cu noua valoare.

Pentru Tag

Atribut	Descriere, valoare acceptată
inversat	Atributul inversat specifică modul în care se afișează lista ordine inversă(de exemplu, 9, 8, 7...).
start	Atributul start specifică valoarea initiala, de la care va începe numerotarea, de exemplu, construcția primul articol va fi atribuit număr de serie„10”. De asemenea, puteți seta tipul de numerotare în același timp, de exemplu, .
tip	Atributul type specifică tipul de marcator de utilizat în listă (sub formă de litere sau cifre). Valori acceptate: 1 este valoarea implicită, numerotarea zecimală. A - lista de numerotare in ordine alfabetică, majuscule (A, B, C, D). a - numerotarea listei în ordine alfabetică, litere mici (a, b, c, d). I - numerotarea cu cifre romane majuscule (I, II, III, IV). i - numerotarea cu cifre romane mici (i, ii, iii, iv).

Microsoft
Google
măr

3. Lista definițiilor

Liste de definiții creat cu o etichetă

Blocul listei de definiții are următoarele stiluri implicite de browser:

Pentru etichete

Și

disponibil .

Producător:: Petr Tochilin
Distribuție:: Andrei Gaidulyan; Alexei Gavrilov; Vitali Gogunsky; Mariya Kozhevnikova

Orez. 3. Lista definițiilor

4. Listă imbricată

Adesea oportunități liste simple nu este suficient, de exemplu, când creați un cuprins, nu vă puteți lipsi articole imbricate. Marcajul pentru o listă imbricată ar fi:

Paragraful 1.
Punctul 2.
- Subclauza 2.1.
- Subclauza 2.2.
  - Subclauza 2.2.1.
  - Subclauza 2.2.2.
- Subclauza 2.3.
Punctul 3.

Orez. 4. Listă imbricată

5. Lista numerotată pe mai multe niveluri

O listă pe mai multe niveluri este utilizată pentru a afișa elementele din listă diferite niveluri cu decalaje diferite. Marcajul pentru o listă numerotată cu mai multe niveluri ar fi:

paragraf
paragraf
1. paragraf
2. paragraf
3. paragraf
  1. paragraf
  2. paragraf
  3. paragraf
4. paragraf
paragraf
paragraf

Acest marcaj implicit va crea o nouă numerotare pentru fiecare listă imbricată, începând cu unu. Pentru a face numerotarea imbricată, trebuie să utilizați următoarele proprietăți:
counter-reset resetează unul sau mai multe contoare, dând o valoare de resetat;
counter-increment setează valoarea incrementului contorului, adică cu ce pas va fi numerotat fiecare articol ulterior;
continut - continut generat, in acest caz este responsabil pentru afișarea unui număr înaintea fiecărui element din listă.

Ol ( /* elimină numerotarea standard */ list-style: none; /* Identificați contorul și dați-i numele li. Valoarea contorului nu este specificată - implicit este 0 */ counter-reset: li; ) li:before ( /* Definim elementul care va fi numerotat - li. Pseudo-elementul înainte indică faptul că conținutul inserat folosind proprietatea conținut va fi plasat înaintea elementelor din listă. Aici este setată și valoarea de increment al contorului (implicit este 1) */ counter-increment: li; / * Numărul articolului din listă este scos folosind proprietatea de conținut.counters() înseamnă că textul generat reprezintă valorile tuturor contoarelor cu acel nume.Perioada citată adaugă un punct de separare între cifre și un punct cu un spațiu este adăugat înainte de conținutul fiecărui element din listă */ conținut: counters(li,".") ". "; )
Orez. 5. Lista numerotată pe mai multe niveluri