Stylizarea liniilor (cifre) în listele OL comandate. Exemple de decorare elegantă UL Li listează tag-ul CSS OL Seturi
Bună ziua, Stimate site-ul de cititoare blog. Astăzi, în cadrul acestei categorii, vreau să vorbesc despre o varietate de liste HTML care pot fi create pe baza etichetelor UL, OL, Li și DL special concepute. Folosind perechea UL și Li, listele etichetate sunt create folosind OL și Li - numerotate și cu ajutorul elementelor DL, DT și DD, se creează așa-numitele liste de definiție. De asemenea, luăm în considerare principiile scurte pentru crearea structurilor imbricate.
Vreau să vă reamintesc că deja am reușit, am reușit să vorbim despre elementele de bază ale tabelelor moderne, precum și layouts (). În plus, am atins fundamentele, bine am învățat.
Liste marcate pe baza etichetelor UL și Li
Eticheta UL este utilizată pentru a crea liste de etichete și pentru a crea numerotate - OL. Aceste etichete sunt pereche și bloc, la fel ca elementul Li.
Elementele de listă separate sunt situate între eticheta de deschidere și închidere, care, la rândul său, constă în elementul de deschidere și închidere Li. De la deasupra și din partea de jos a listelor HTML, browserul adaugă liniuțe la o singură linie, similar cu retragerile create de tag-ul paragraf.
Să vedem, de exemplu, o versiune marcată care ar putea arăta astfel:
- Prima linie
- Al doilea
- Ultimul element
În interiorul etichetelor de deschidere și închidere, UL, numai elementele Li pot fi instalate și orice conținut (text, imagini, antete, paragrafe, link-uri și chiar alte liste pot fi introduse în interiorul acestor elemente.
Acestea. UL servește numai pentru organizarea unei liste marcate (neautorizate) și tot ceea ce veți vedea pe pagina web din interiorul acestuia este implementat utilizând conținutul elementelor Li.
Pentru UL, puteți schimba vizualizarea markerului, prescriu valori diferite în acesta pentru atributul "Type". Dacă "Tipul" (gestionarea aspectului markerilor) pentru elementul UL nu este specificat, va fi afișată vizualizarea implicită a markerului (disc - vopsită în culoarea textului cercului):
- - crema de cerc (implicit);
- - Cerc pictat;
- - Piața
În exemple, atributul de tip, am fost prescrise în elementul UL, folosind acest tip de markeri pentru toate elementele. Dar atributul "Type" poate fi prescris pentru fiecare etichetă Li individuală, setând propriul tip de marker pentru acest element.
Un exemplu de listă marcată cu diferite tipuri de marker pentru fiecare element:
- Marker de disc
- Marcator sub forma unui disc nu pictat
- Pătrat
Liste numeroase în HTML bazate pe eticheta OL
Pentru a crea o listă numerotată, sunt folosite etichete OL, în interiorul căruia elementele Li vor fi localizate din nou. OL și Li, așa cum am menționat deja, sunt blocuri (adică, încercând să ia tot locul disponibil în lățime) și în interiorul OL nu va fi plasat altceva decât elementele Li.
Se pare că OL și UL sunt etichete de service care sunt necesare doar pentru a indica browserul, care tip de listă formăm (etichetat sau numerotat). În cazul unui nume numerotat - în partea stângă a fiecărui articol, nu vom vedea un marker, ci punctul și punctul din spatele acesteia:
- Prima linie
- Al doilea punct
- Al treilea șir
După cum am menționat deja un pic mai mare, elementele lui UL, OL și Li au capacitatea de a utiliza atributul de tip. Acesta vă permite să configurați tipul de marker sau set, ce numere sau litere vor fi numerotate elemente de listă. Pentru o listă numerotată, parametrii acestui atribut pot primi următoarele valori:
- - Numerotarea va fi efectuată prin numerele arabe convenționale (aceeași opțiune va fi utilizată în mod implicit, dacă nu există un atribut "de tip");
- - scrisori majuscule ca numerotare;
- - litere mici;
- - cifre romane;
- - numerele romane mici;
Un exemplu de listă numerotată cu diferite tipuri de numerotare pentru fiecare element:
- cu numerotarea de numerele romane mari
- Numerotarea cu litere latine mici
- Numerotarea romană mică
La crearea listelor numerotate, are, de asemenea, capacitatea de a începe numerotarea de la o unitate, dar de la numărul specificat în atributul atributului. De exemplu:
- Primul element al cărui număr este setat în atributul OL Tag Start \u003d "23"
- Următorul element, cu un număr pe unitate mare
- Altul
Pentru OL, puteți începe, de asemenea, o nouă numerotare de la orice valoare, pornind de la orice element, vorbind în atributul valoric la elementul Li de deschidere cu numărul dorit. De exemplu:
- Primul punct cu numărul unu
- Acest element va primi numărul specificat în atributul valoric \u003d "32"
- Punct cu un număr mare
Înregistrarea apariției listelor în CSS (mese de stil)
Dar, de regulă, acum apariția markerilor nu este dată prin atributul de tip, ci pentru care sunt prescrise proprietățile corespunzătoare.
Aici voi da pur și simplu un exemplu de markeri diferiți pentru liste non-numerotate, aspectul căruia este setat printr-un fișier separat cu mese de stil cascadă.
- Primul punct
- Al doilea
- Ultimul
Dar despre vorbim în articolele ulterioare. În acest fel, apariția markerilor pentru UL pe acest blog este stabilită. Imaginile sunt folosite ca markeri: pentru articole obișnuite din lista nemetrier -, pentru articole imbricate de ne-măsurate -.
Liste speciale și subfice în codul HTML
A treia și ultima viziune se numește "liste de definiție" și sunt setate folosind trei etichete - dl, dt și dd. DL raportează browserul, care va urma lista definițiilor.
De obicei, acest tip este folosit (bine sau sa presupus că va fi folosit) pentru a scrie articole de dicționar constând din termeni (prizonieri în etichete DT) și descrierile lor (deținuți în etichete DD).
- Primul termen
- Descriere
- Al doilea termen
- Descrierea sa
Dacă vă uitați la exemplul de mai sus, scoateți elementul DD (descrierea termenului) (cu 40 de pixeli) față de elementul DT (termenul însuși).
În general, DL, DT și DD sunt etichete de blocare și, în interiorul elementului DT, puteți introduce doar conținut cu etichete de linie (se pare că în interiorul DT este imposibil să utilizați elemente bloc de titluri și paragrafe). Și în cadrul etichetelor DD, puteți introduce orice elemente și mici și blocuri.
Lista imbricată HTML este creat de analogie cu simplu, dar în interiorul listei principale, partea din elementele este din nou din nou în deschiderea și închiderea UL sau OL.
Rețineți că un Li de închidere al acelui element în care va fi creat elementul atașat se face numai după întregul cod al listei atașate (este foarte important pentru afișarea corectă a paginii web). Lista atașată poate arăta așa ceva:
- Primul punct al principalei numerotate
- Al doilea punct
- Primul element al marcajului imbricat
- Al doilea
- Al treilea și ultimul punct al marcajului
- Al treilea element este numerotat
Multă baftă! La întâlnirile ambigue pe site-ul web al blogului
S-ar putea să fiți interesat
Cum se introduce în link-ul HTML și imaginea (foto) - img și o etichete Selectați, Opțiune, Textare, Etichetă, FieldSet, Legend - HTML Tags Formulare de liste de drop-down și câmp de text 
Formulare HTML pentru formularul site-ului - Tag-uri, Intrare și selectare, Opțiune, Textare, Etichetă și altele pentru a crea elemente Webform 
Deoarece culorile sunt setate în codul HTML și CSS, selecția nuanțelor RGB în tabele, emiterea de programe Yandex și alte programe 
Embed and Object - Etichete HTML pentru a afișa conținutul media (video, flash, audio) pe paginile web 
Etichete și atribute ale antetelor H1-H6, linia orizontală HR, briefing RR și paragraful P conform HTML 4.01 
Tabele în tabelul HTML - Tags, TR și TD, precum și Colspan, CellPadding, CellSpacing și Rowspan pentru a le crea 
Care este limba HTML HyperText Markup și cum se poate vedea lista tuturor etichetelor din validatorul W3C 
Tag-uri de fonturi (față, dimensiune și culoare), blockquote și formatare text prealabilă în HTML pur (fără a utiliza CSS) 
Iframe și cadru - ceea ce este și cât de bine să utilizați cadre în HTML 
Tag-ul IMG - HTML pentru introducerea imaginilor (SRC), alinierea și raționalizarea acestuia cu text (align), precum și sarcini de fundal (fundal)
Pe baza elementelor de bază, considerăm acum elementele utilizate pentru a furniza structura și valorile pentru designul diferitelor părți. Dacă cineva nu știe, atunci UL și Li este o opțiune mult mai bună decât textul simplu, deoarece atunci când textul este înfășurat, în special într-un telefon mobil, este excelentă indentare și nu curge în jurul markerului.
Se crede că listele reprezintă o modalitate excelentă de a prezenta informații despre pagini, deoarece sunt ușor de citit și arata bine. Mulți oameni par să creadă că gloanțele de puncte sunt imagini mici, dar, de fapt, toate acestea sunt create printr-un cod HTML destul de simplu. Puteți introduce diferite tipuri de liste unul în celălalt dacă doriți, pur și simplu nu uitați să le închideți corect. Puteți juca cu textul dorit în toate aceste comenzi de listă.
De asemenea, trebuie să știți că listele conțin inițial mai multe elemente:
1
. Informații neordonate.
2
. Informații comandate.
3
. Definiții.
Noțiuni de bază pentru instalarea:
1. Opțiunea:
- Element de listă
- Lista unică
- Listele originale
- Zornet.ru - webmaster.
- O altă listă
Css.
Ksanopan (
Marja: 19px 0 0;
Padding: 0;
Lista de stil: Nici unul;
Contra-resetare: Li;
}
.RSangelopan Li (
Frontieră: 2 35755AD 2575AD;
Fundal: # D7deE4;
Poziție: rudă;
Marja de jos: 17px;
Padding: 15px 9px;
}
.RSangelopan Li: Hover (
Z-Index: 1;
}
.RSangelopan Li: Înainte (
Frontieră: 2270b3 2270b3;
Poziție: absolută;
Top: -14px;
Padding: 3px 9px;
Font-dimensiune: 11px;
Greutate font: Bold;
Culoare: # 246EAF;
Fundal: # F2F4F7;
Contra-increment: Li;
Conținut: Counter (Li);
-Webit-durata de tranziție: 0.4s;
Durata de tranziție: 0.4S;
}
.RSangelopan Li: Hover: Înainte (
Fundal: # 2672b3;
Culoare: # F7F9FB;
-Webit-transformare: traduce (-11px, 0);
-M-transformare: traduce (-11px, 0);
-O-transformare: traduce (-11px, 0);
Transformare: Traduceți (-11px, 0);
}
.RSangelopan Li: După (
Conținut: "";
Poziție: absolută;
Durata de tranziție: 0.3S;
-Webit-tranziție-proprietate: lățime;
Proprietate de tranziție: lățime;
Z-Index: -1;
Fundal: #fff;
Înălțime: 100%;
stânga: 0;
Top: 0;
Lățime: 0;
}
.RSangelopan Li: Hover: După (
Lățime: 100%;
}
Pe această instalare.
A doua opțiune:
- Element de listă
- Lista unică
- Listele originale
- Zornet.ru - webmaster.
- O altă listă
Css.
Beleduluzlopagges (
Marja de jos: 8px;
Padding: 0;
Lista de stil: Nici unul;
Contra-resetare: Li;
}
.Eleduzlopamges Li (
Poziție: rudă;
Frontieră: 2px solid # 195588;
Fundal: # eff3f7;
Padding: 15px 19px 15px 27px;
Marja: 12px 0 12px 40px;
-Webit-tranziție-durată: 0.3s;
Durata de tranziție: 0.3S;
}
.Eleduzlopamges Li: Hover (
Fundal: #fff;
}
.Eleduzlopamges Li: Înainte (
Înălțimea liniei: 32px;
Poziție: absolută;
Top: 4px;
stânga: -39px;
Lățime: 39px;
Text-align: centru;
Font-dimensiune: 16px;
Greutate font: Bold;
Culoare: # F9F5F5;
Fundal: # 275b88;
Contra-increment: Li;
Conținut: Counter (Li);
Durata de tranziție: 0.2S;
}
.ELEDUZLOPAMGES LI: HOOVER: Înainte (
Lățime: 46px;
}
.Eleduzlopamges Li: După (
Poziție: absolută;
stânga: 0;
Top: 4px;
Conținut: "";
Înălțime: 0;
Lățime: 0;
Frontieră: 16px solid transparent;
Frontieră la stânga: # 275b88;
-Webit-tranziție-durată: 0.2s;
Durata de tranziție: 0.2S;
}
.Eleduzlopamges Li: Hover: După (
Margin-stânga: 6px;
}
Centrul Gamut poate fi în mod independent stabilit stilul principal al site-ului.
A treia opțiune:
- Scripturi pentru Ucoz.
- Șabloane pentru ucoz.
- Design pentru site
- Stiluri pentru site
- Stilistica pe CSS.
Css.
Nizualisanelag (
Padding: 0;
Lista de stil: Nici unul;
Contra-resetare: Li;
}
.nizualisanelag Li (
Poziție: rudă;
Padding: 9px 17px 17px 25px;
Marja-stânga: 39px;
Durata de tranziție: 0.2S;
Cursor: pointer;
Greutate font: Bold;
Culoare: # 343638;
}
.nizualisanelag Li: Înainte (
Frontieră: 3px solid transparent;
Linie-înălțime: 35px;
Poziție: absolută;
Top: 0;
stânga: -29px;
Lățime: 41px;
Text-align: centru;
Font-dimensiune: 14px;
Greutate font: Bold;
Culoare: # 619dce;
Contra-increment: Li;
Conținut: Counter (Li);
Durata de tranziție: 0.3S;
Dimensionarea casetei: Border-cutie;
}
.nizualisanelag Li: Hover: Înainte (
Culoare: # 337ab7;
}
.nizualisanelag Li: După (
Poziție: absolută;
Top: 0;
stânga: -29px;
Lățime: 41px;
Înălțime: 41px;
Border: 5px solid # 468bd0;
Raza de frontieră: 50%;
Conținut: "";
Opacitate: 0,5;
-Ems-box-box: border-cutie;
-Moz-cutia: Border-cutie;
Dimensionarea casetei: Border-cutie;
}
.nizualisanelag Li: Hover: După (
Animație: 500ms ușurinta-in-out 0s Bouncein;
Opacitate: 1;
}
@Keyframes Bouncein (
0% {
Opacitate: 0;
Transformare: Scale3d (.3, .3, .3);
}
20% {
Transformare: Scale3D (1.3, 1.3, 1.3);
}
40% {
Transformare: Scale3d (.9, .9, .9);
}
60% {
Opacitate: 1;
Transformare: Scale3D (1.03, 1.03, 1.03);
}
80% {
Transformare: Scale3D (.97, .97, .97);
}
La (
Opacitate: 1;
Transformare: Scale3D (1, 1, 1);
}
}
Se duce cu o animație frumoasă.
4a 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
Css.
Padding: 0;
Lista de stil: Nici unul;
}
.kdezamuden Li (
Padding: 6px;
}
.kudezamuden Li: Înainte (
Hadding-dreapta: 11px;
Greutate font: Bold;
Culoare: # 4979A0;
Conținut: "\\ 2606";
Durata de tranziție: 0.4S;
}
.Kudezamuden Li: Hover: Înainte (
Culoare: # 235e90;
Conținut: "\\ 2605";
}
Similar cu versiunile anterioare, numai pictograma în sine este schimbată.
În general, aceasta este o mică selecție de liste, va oferi un maestru web pentru a face o listă frumoasă pe portal, unde el însuși poate face mai mult pe cât vrea să-l vadă.
Dacă trebuie să plasați elemente într-o listă numerotată, în loc de marcat, atunci HTML comandat va fi folosit aici. Această listă este creată utilizând tag-ul OL. Numerotarea începe cu o unitate și crește cu una pentru fiecare element ordonat ulterior al listei cu eticheta Li.
În limba HTML HyperText Markup există o etichetă
- folosit pentru a crea liste de etichete. Acesta este susținut de toate browserele moderne și vă permite să ieșiți elemente în ordine nu este necesar. De exemplu, este foarte important cu ajutorul elementelor de meniu și toate acestea care se referă la liste pe pagină: feluri de mâncare, produse, echipamente, unelte și multe altele, care ar trebui să fie enumerate fără a indica prioritatea unuia sau a unui alt element.
- Element # 1.
- Element # 2.
- Element # 3.
- ...
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
-
- Element # 2-1.
- Element # 2-2.
- Element # 2-3.
- Element # 3.
- ...
- Element # 1.
- Element # 2.
- Element # 1.
- Element # 2.
- Element # 1.
- Element # 2.
- Element # 1.
- Element # 2.
- ...
- disc - un marker sub formă de cană (un exemplu a fost mai mare)
- cercul - un marker sub forma unei cani transparente (un exemplu a fost mai mare)
- pătrat - un marker sub forma unui pătrat (un exemplu a fost mai mare)
- zecimal - marcator sub forma unei liste Numerennov de numere arabe: 1, 2, 3, ...
- zecimal-zero-zero - un marker sub forma unei liste Numerennov de numerele arabe cu zero la început: 01, 02, 03, ...
- markerul inferior - marker sub forma unei liste Numerennov a alfabetului roman al literelor mici: I, II, III, IV, V
- superior-Roman - un marker sub forma unei liste Numerennov a alfabetului roman în litere mari: I, II, III, IV, V
- latină latină - un marker sub forma unei liste de alfabet latin cu litere mici: A, B, C, D, ...
- suprafață latină - un marker sub forma unei liste de alfabet latin în litere mari: A, B, C, D, ...
- markerul inferior-greacă sub forma unei liste de alfabet grecesc cu litere mici
- markerul superior-greacă sub forma unei liste de alfabet grecesc în litere mari
- . Când setați o etichetă de atribut
- Toate elementele listă vor fi afișate deoarece atributul indică acest lucru. Dar putem să-i afișăm unul sau alt element. Exemplu în figura:
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
- Element # 2.
- Element # 3.
- (Element de listă).
Sprijiniți browserele
Atribut
Operă.
Iexplorer.
Margine.porniți, tastați da da da da da da inversat da da da da Nu Nu Atributes.
Atribut Valoare Descriere compact. compact. Nu sunt acceptate în HTML5.
Indică faptul că lista ar trebui să fie mai mică decât dimensiunea obișnuită (înălțimea liniei: 80%).
Utilizați CSS în loc de acest atribut.inversat Indică faptul că ordinea într-o listă numerotată (ordonată) ar trebui să urmeze descendența. Atributul nu este acceptat de browserele Internet Explorer și Edge. start. număr Specifică valoarea inițială a listei numerotate (ordonată). Valorile ar trebui să fie întregi, este permisă utilizarea valorilor negative. Când se utilizează cu litere (Type \u003d "A" și Type \u003d "A"), numărul specificat în valoarea atributului este numărul de serie al literei din alfabet. De exemplu, Start \u003d "4" se va potrivi litera "D" Și lista va începe cu ea. Când utilizați valoarea Start \u003d "27", contorul este resetat, în timp ce lista devine două cifre ("27" \u003d "AA", "28" \u003d "AB", "29" \u003d "AC" ...) . tip 1 (Mod implicit)
Un mare)
a (litere mici)
I (romanul mare)
i (Roman mic)Determină tipul de marker, care este utilizat în construcția unei liste numerotate (ordonate). Exemplu de utilizare
Un exemplu de utilizare a etichetei <ol> <span> - Primul punct Al doilea punct
- Al treilea punct
- Primul punct.
- Al doilea element.
- Al treilea punct.
Uitați-vă pe pagina pe care o va fi, respectiv:
Dacă doriți ca lista să înceapă de la un număr specific (nu de la 1), trebuie să specificați atributul de pornire pentru etichetă
-
.
De exemplu:
Un alt atribut interesant este tip, care vă va permite să setați o numerotare alfabetică ("A" - mare, "A") sau numerotarea de la numerele romane ("I" - în majusculă, "i" - în registrul inferior).
Luați în considerare un exemplu în care sunt prezentate toate valorile atributului de tip posibile (diferite de valoarea implicită):
Un exemplu de utilizare a atributului de etichetă HTML<оl> - >
- Al treilea punct
- Primul punct Al doilea punct
- Al treilea punct
- Primul punct Al doilea punct
- Al treilea punct
- Primul punct Al doilea punct
- Al treilea punct
- ):
Un exemplu de listă numerotată investit într-o altă listă numerotată <span> -
Primul punct
- Al treilea punct Al doilea punct
-
Primul punct
- Al treilea punct
- Element # 1.
- Element # 2.
- Element # 3.
- ...
- A - Specifică markerii sub formă de litere latine de capital (A, B, C.);
- a - setează marcajele sub formă de litere latine mici (A, B, C.);
- I - stabilește marcaje sub formă de numere romane mari (I, II, III, IV ..);
- i - stabilește marcajele sub formă de numere romane mici (I, II, III, IV ..);
- 1 (în mod implicit) - setează marcatorii sub formă de numere arabe (1, 2, 3 ..);
- . Există cuvinte separate, fraze, paragrafe, imagini, bucăți de cod și multe altele, care sunt conținutul listei marcate, sunt situate între etichetele de deschidere și închidere.
Notă
În interiorul listei este posibil să vă schimbați contul la dvs. Pentru a face acest lucru, există o valoare atribute specială \u003d "" eticheta
- care i se atribuie o valoare numerică. de exemplu
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 10.
- Element # 11.
- Element # 12.
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
- Element # 2.
- Element # 3.
- .
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 4.
Acesta este modul în care arată pe pagină:
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 4.
Exemplul 5. Lista numărătoare reversibilă în HTML
Următorul este un exemplu al unei liste numerotate inversă (cont în ordinea inversă).
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 4.
Acesta este modul în care arată pe pagină:
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 4.
Codul arată astfel:
Schimbarea markerilor de etichete
- Folosind CSS.
Elementele listei marcate create de etichetă
- pot fi marcate cu imagini arbitrare. CSS este folosit pentru a schimba tipul markerului. de exemplu
Și se pare că pe pagină:
Cu ajutorul CSS, putem seta alte tipuri de afișări de marcare. Dar trebuie să vă amintiți că atunci când specificați orice etichetă de stil
- Se aplică tuturor elementelor listei. Tag-uri HTML.
Semnificație și aplicare
Lista numerizată (ordonată) este proiectată pentru elementele care urmează într-o ordine definită. Lista numerotată începe cu eticheta
- (abreviat de la engleza lista ordonata. - Lista ordonata). Fiecare element al listei începe cu o etichetă
- >
- >
- >
Vă atrag atenția că este permisă generarea listelor numerotate (ordonate) investite în alte liste numerotate (în interiorul elementului de listă
Uită-te la pagina pe care o va fi, respectiv, așa.
Singura diferență este că această etichetă este strict făcută pentru a număra listele. Titlul etichetei a venit din reducerea în limba engleză "Lista comandată" - o listă numerotată.
Eticheta de sintaxă
În cazul în care atributul tip \u003d "valoare" poate lua următoarele valori
Atributul START \u003d "Valoare" stabilește valoarea inițială (valoarea inițială) a raportului.
Atributul inversat stabilește contul de returnare (dacă este necesar).
Etichetă
- necesită utilizarea obligatorie a unei etichete de închidere
Pentru formarea elementului de listă, se utilizează o etichetă de perechi
Exemple cu liste numerotate în HTML (
- )
Exemplul 1. Lista HTML numerotată sub formă de litere latine
Exemplu cu majuscule
Exemplu cu litere stricte
Acesta este modul în care arată pe pagină:
Exemplul 2. Lista HTML numerizată sub formă de litere romane
Exemplu cu majuscule
Acesta este modul în care arată pe pagină:
Exemplu cu litere stricte
Acesta este modul în care arată pe pagină:
Exemplul 3. Numered HTML List Diverse Poziția de pornire
Un exemplu care arată caracteristicile atributului Start care vă permite să setați valoarea de pornire a contorului.
Acesta este modul în care arată pe pagină:
Exemplul 4. Modificați numărarea în numere HTML
Mai jos este un exemplu cu capacitatea de a schimba valorile contorului utilizând atributul valoric atunci când afișați elemente noi în etichete
Eticheta de sintaxă
Acest cod este convertit într-o listă marcată de pe site:
Etichetă
- necesită utilizarea obligatorie a unei etichete de închidere
Pentru formarea elementelor de listă, se utilizează o etichetă de perechi. Există cuvinte separate, fraze, paragrafe, imagini, bucăți de cod și multe altele, care sunt conținutul listei marcate, sunt situate între etichetele de deschidere și închidere.
Care poate fi conținutul listei marcate?Acestea pot fi diferite texte, inclusiv cuvinte, fraze și paragrafe, imagini, liste investit, felii de cod PHP și multe altele, care au nevoie de etichetare simplă.
Fiecare element al listei marcate se retrage în mod implicit pe 40 de pixeli spre dreapta. Folosind stiluri CSS, putem schimba afișarea acestei liste la discreția dvs. Etichetă
- Este blocat, deci este nevoie de o zonă disponibilă, limitată de marginea ecranului, un cadru de masă sau alte elemente ale paginii.
Este permis să investească "lista în listă"
de exemplu
Atribute și proprietăți etichete
Atributul de etichete pe scară largă
- Este atributul de tip care indică modul în care arată marcajul listei. Pot lua următoarele valori
1. Tip \u003d "Discul" - un marker sub forma unei cani vopsite (această valoare este determinată implicit). Un exemplu cu un disc a fost ușor mai mare.
2. Tip \u003d "cerc" - un marker sub formă de cană transparentă
De exemplu:
3. Tip \u003d "pătrat" \u200b\u200b- un marker sub formă de pătrat
De exemplu:
Dar cum arată pe pagină:
În CSS, tipul markerului este setat folosind atributul de tip în stil list:
Luați în considerare ce valori pot lua tipul de stil de listă:
Nota 2.
Atributul poate fi atribuit ca eticheta însăși.
- și etichete
Atributele globale Atribute formează HTML5
Introducere în JSON Ce fișier JSON TXT
Expresii regulate (Regexp Object) Formular Verificați expresiile regulate JavaScript Exemple