Sarcină
Afișați o listă cu marcatori pe orizontală, fără marcatori.
Soluţie
Etichetă glonț
- afișează elementele în mod implicit
- vertical unul deasupra celuilalt. Pentru a crea elemente de navigare, în unele cazuri este convenabil să afișați lista pe orizontală. Există mai multe moduri de a realiza această afișare a listei.
Ar trebui să știți deja că HTML are elemente bloc și inline. Elementele inline nu își creează propriile blocuri; un exemplu de astfel de elemente sunt etichetele sau . Elementele de bloc sunt afișate cu linie nouăși creați un bloc dreptunghiular, un exemplu de astfel de etichete
sauDeci iată eticheta
- este, de asemenea, un element bloc.
A eticheta
- nu s-a comportat ca un element de bloc, puteți folosi CSS pentru a-l face inline.
Afișarea proprietății CSS determină modul în care va fi afișat elementul în document. Să luăm în considerare trei dintre semnificațiile sale (deși există mai multe):
- bloc - elementul este afișat ca element bloc.
- inline - elementul este afișat ca inline.
- inline-block - element block-line, citiți mai multe despre acest tip de element mai jos, îl vom folosi.
În primul rând, să facem o listă orizontală transformând punctele marcante în elemente inline. În stilul CSS, să scriem o regulă în care selectorul li este setat să afișeze proprietatea cu valoarea inline .
Listați pe orizontală Deci acest stil a funcționat și am primit aranjare orizontală articole din lista:
Figura 1. Exemplul #1 la locul de muncă.
Această metodă are dezavantaje. Faptul este că elementele inline au unele limitări în comparație cu elementele bloc. De exemplu, nu li se poate da lățimea și înălțimea, dar cele bloc pot.
De exemplu, avem nevoie ca elementul de meniu creat de noi să aibă o lățime de 150px și o înălțime de 40px. Să încercăm să schimbăm stilul în următorul, adică să adăugăm două reguli care stabilesc dimensiunea elementului de meniu:
Aceste modificări nu vor duce la nicio modificare. Pentru ca elementele de meniu să fie poziționate orizontal și pentru a putea seta lățimea și înălțimea, trebuie să seteze tipul la bloc inline . Să ne schimbăm exemplul de cod:
Listați pe orizontală Acest cod funcționează și modificările sunt vizibile:
Figura 2. Exemplul nr. 2 în acțiune. Dar poate exista diferite variante, de exemplu, trebuie să afișăm liste imbricate în meniu:
Listă imbricată. Iată rezultatul acestui cod:
Figura 3. Exemplul nr. 3 la locul de muncă. Vedem că blocurile nu sunt aliniate în înălțime așa cum ne-am dori. Desigur, puteți specifica pentru toate blocurile aceeasi inaltime, dar nu îi știm întotdeauna valoarea exactă în avans și se poate schimba.
Dar de fapt, de ce se întâmplă asta?
Blocurile noastre au o proprietate de afișare setată la inline-block . Aceasta înseamnă că au calitățile atât ale elementelor bloc (capacitatea de a specifica lățimea și înălțimea) cât și ale elementelor inline. Ceea ce vedem este calitatea elementelor inline.
Să ne uităm la un șir cu caractere „A” de diferite dimensiuni:
A A A A A A A
Vedem că toate literele sunt aliniate vertical de-a lungul liniei de jos. Mai precis, de-a lungul liniei de bază, dar să nu intrăm în buruieni acum. Așadar, același lucru s-a întâmplat cu blocurile noastre.
Pentru a alinia textul vertical, utilizați proprietatea vertical-align. În exemplul nostru #3, trebuie să folosim valoarea top , care va alinia marginea de sus a elementului cu partea de sus a celui mai înalt element de pe linie.
Deocamdată să-l aplicăm unui șir cu caractere „A” de diferite dimensiuni:
A A A A A A A
Literele par să „sare” puțin. Am setat chenarul CSS la cea mai înaltă literă pentru a arăta că de fapt nu există salturi, doar spațiu gol între chenarul de sus (unde are loc alinierea) și punctul de sus al „A”.
Proprietatea de aliniere verticală trebuie aplicată fiecăruia element inline, nu se moștenește. Puteți citi mai multe despre această proprietate: vertical-align .
După această digresiune, vom continua să plasăm elementele listei pe orizontală.
A doua cale
Puteți plasa elementele din listă orizontal utilizând proprietatea float. Această proprietate specifică pe ce parte este aliniat elementul și are două poziții: stânga și dreapta.
Iată un exemplu folosind acest cod:
Listați pe orizontală Iată rezultatul codului:
Figura 4. Exemplu de lucru. Exemplul pare să funcționeze. Dar există o avertizare în utilizarea acestei proprietăți. Acum ne vom uita la asta. De exemplu, să luăm un cod în care sunt două listă orizontală Cu în diverse feluri aranjarea elementelor pe orizontală: afișare și plutire:
Listați pe orizontală Iată rezultatul codului:
Figura 5. Exemplu de lucru. În aceste exemple, lista containerelor
- au un chenar roșu gros de 1 pixel. Dar Lista de top, care utilizează proprietatea de afișare, include elemente de listă. Dar elementele unei liste create folosind proprietatea float cad din containerul lor.
- sunt încă situate în afara containerului
-
.
- ,
-
În mod implicit, elementele din listă sunt numerotate de browser în ordine, începând cu unul. Dacă numerotarea trebuie să înceapă de la altceva decât unul, atunci este utilizat atributul start, care specifică numărul de la care va începe lista numerotată. Atributul acceptă numere întregi ca valori. De asemenea, puteți inversa ordinea de numerotare. Acest lucru se face folosind atributul inversat, care este folosit fără valori. Atribut introdus HTML 5și funcționează în toate browserele, cu excepția IE.
De asemenea, este posibil să setați vizualizarea marcator de listă numerotat. Pentru a face acest lucru, utilizați atributul tip, care poate lua valorile „A | a | I | i | 1” , care, în consecință, înseamnă:
- litere mari latine,
- litere latine mici,
- cifre romane majuscule,
- cifre romane mici,
- cifre arabe.
Deoarece toate valorile enumerate și multe altele pot fi setate cu ușurință prin Stiluri CSS, utilizarea atributului type, conform autorului, nu este recomandabilă, deși este permisă în HTML 5.
Utilizarea unei liste numerotate este prezentată în Exemplul 2.10.
Lista numerotata Lunile de primăvară în ordine:- Martie
- Aprilie
- Mai
- August
- iulie
- iunie
Exemplul 2.10. Folosind elementul „ol”.
Apropo, browserele afișează toate listele ca elemente de bloc, așa că atunci când afișați exemplul, puteți vedea clar margini verticale. Încercați să introduceți singur codul, dați listelor un fundal galben și vedeți rezultatul.
Liste cu marcatori. Etichete
- Și
- ,
Listă cu puncte format dintr-o etichetă pereche
- (din engleza lista neordonata). Elementul „ul” însuși este folosit ca container pentru articolele de listă, care sunt formate, ca și în cazul listelor numerotate, din etichete pereche.
- și sunt situate una după alta.
O listă cu marcatori folosește marcatori de cerc în loc de cifre și litere. Puteți modifica aspectul marcatorilor folosind stiluri CSS. În ceea ce privește atributul type, acesta a fost eliminat în HTML 5. Deci, rămân doar atributele universale și atributele evenimentului.
Listă cu puncte Lunile de primavara:- Martie
- Aprilie
- Mai
Exemplul 2.11. Folosind elementul „ul”.
Liste de definiții. Etichete
- ,
- ,
Lista de definiții format dintr-o etichetă pereche
- (din engleza lista de definiții). Elementul „dl” în sine este folosit ca container pentru articolele din listă. Fiecare astfel de articol, la rândul său, constă din elemente „dt” (din engleză. termen de definiție) și „dd” (din engleză. descrierea definiției), formată, respectiv, din etichete pereche
- Și
- . Primul conține termenul în curs de definire, iar al doilea conține definiția termenului.
Să ne uităm la exemplul 2.12 pentru claritate.
Lista de definiții - HTML
- Limbajul de marcare hipertext standard pentru documentele web
care este utilizat pe scară largă pe World Wide Web. - CSS
- Limbajul de descriere formal aspect document,
scris folosind limbajul de marcare.
Exemplul 2.12. Folosind elementul „dl”.
Liste imbricate
Uneori devine necesar să se creeze liste imbricate, care sunt liste situate în elemente de listă externe. Să ne uităm la crearea de liste imbricate folosind exemplul 2.13.
Liste imbricate - Trei soiuri de mere:
- Antonovka,
- Strefel,
- Kuban.
- Trei soiuri de pere:
- Cizhovskaya,
- Williams,
- Ducesă.
Exemplul 2.13. Utilizarea listelor imbricate
După cum puteți vedea, crearea de liste imbricate nu este deloc dificilă. Pentru a face acest lucru, trebuie să aveți grijă între eticheta de deschidere
- și eticheta de închidere
Pentru listele numerotate și marcate, aranjați lista imbricată de tipul dorit. Pentru listele de definiții, lista imbricată trebuie plasată între eticheta de deschidere- și eticheta de închidere
. Acest lucru poate fi necesar, de exemplu, dacă trebuie să dați unui termen mai multe definiții.Navigați rapid la alte pagini
- Crearea de liste în HTML. Etichete
- ,
- ,
- ,
- ,
- Badminton
- Baseball
- Chomolungma
- Chogori
- Kanchenjunga
- Summit Plummet
- Aleea Tantrumului
- Nebun
- Marea Filipinelor
- Marea Arabiei
- mare de corali
- roșu
- Verde
- Albastru
- în locul în care se produce
- , browserul adaugă automat o întrerupere de linie;
- lista are indentări în partea de sus și de jos;
- În mod implicit, marcatorii sunt afișați ca un cerc umplut;
- Fiecare element de listă este deplasat la dreapta în raport cu textul principal.
- disc - markere sub formă de cerc umplut;
- cerc - marcatori sub forma unui cerc deschis;
- pătrat - marcatori pătrați.
- Sepulki
- Sepulcarie
- Sepulenarea
- Nu va funcționa, așa că va trebui să o rezolvi. Pentru a face acest lucru, ascundeți marcatorii de listă folosind proprietăți tip listă cu valoarea none și în text înainte de conținut
- Adăugăm propriul caracter folosind pseudo-elementul ::before. În exemplul 2, un astfel de marker este un triunghi.
Exemplul 2: Folosind::before
Liste - Sepulki
- Sepulcarie
- Sepulenarea
Rezultat acest exemplu prezentat în Fig. 2. Deoarece folosirea proprietății de tip listă cu valoarea none nu elimină deloc marcatorii, ci doar le ascunde din vedere, lista apare deplasată la dreapta. Pentru a scăpa de această caracteristică, exemplul adaugă proprietatea text-indent cu valoare negativă. 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 că editorul îl acceptă. Caracterele î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 marker ca marker. imagine potrivită prin proprietatea list-style-image. Valoarea este relativă sau cale absolută La fisier grafic, așa cum se arată în exemplul 3.
Exemplul 3: Utilizarea unei imagini ca marcator
Liste - Sepulki
- Sepulcarie
- Sepulenarea
Cel mai bine este să alegeți desenul mărime mică pentru a evita transformarea elementelor din listă în subtitrări. În fig. Figura 4 prezintă rezultatul unui exemplu de utilizare a imaginilor mici ca markeri.
Orez. 4. Desenul ca marker
Utilizarea list-style-image are câteva dezavantaje:
- modelul nu poate fi mutat în sus sau în jos;
- V browsere diferite Poziția imaginii în raport cu textul poate diferi.
Aceste neajunsuri pot fi evitate folosind proprietatea de fundal, se stabilește imagine de fundal. Pentru fiecare element de listă
- scoatem marcajele originale si punem imagine de fundal nicio repetare. Și pentru ca textul să nu apară deasupra imaginii, îl deplasăm la dreapta folosind padding-left (exemplul 4).
Exemplul 4: Utilizarea fundalului
Ul ( margin-left: -1em; ) li ( list-style: none; background: url(images/bullet.png) no-repeat 0 2px; padding-left: 20px; )
Poziția textului și a marcatorului
Există două moduri de a plasa un marcator în raport cu textul: marcatorul este mutat în afara graniței elementelor listei sau înfășurat în jurul textului (Fig. 5).
interior in afara Orez. 5. Amplasarea markerilor în raport cu textul
Pentru a controla poziția marcatorilor, utilizați proprietatea list-style-position. Are două semnificații: exterior - marcatorii sunt plasați în afara blocului de text (aceasta este valoarea implicită) și interior - marcatorii fac parte din blocul de text și sunt afișate în elementul din listă (exemplul 5).
Exemplul 5: Schimbarea poziției markerilor
Liste - Înainte de a începe, verificați dacă echipamentul inclus cu kitul 3BM este inclus.
- În lipsa unuia sau mai multor dispozitiv periferic Trebuie să contactați imediat personalul tehnic al VT-urilor.
- Dupa inspectie metode vizuale De la locul de muncă, puteți porni cu atenție alimentarea 3BM.
Rezultatul acestui exemplu este prezentat în Fig. 6.
În limbajul de marcare Hipertext HTML există o etichetă
- , folosit pentru a crea liste cu marcatori. Este susținută de toată lumea browsere moderneși vă permite să afișați elemente într-o ordine care nu necesită numerotare. De exemplu, afișează foarte des articolele de meniu și tot ce are legătură cu listele de pe pagină: feluri de mâncare, produse, echipamente, unelte și multe altele care trebuie listate fără a indica prioritatea unui anumit articol.
- Elementul #1
- Elementul #2
- Elementul #3
- ...
- Elementul #1
- Elementul #2
- Elementul #3
- Elementul #1
-
- Elementul #2-1
- Elementul #2-2
- Elementul #2-3
- Elementul #3
- ...
- Elementul #1
- Elementul #2
- Elementul #1
- Elementul #2
- Elementul #1
- Elementul #2
- Elementul #1
- Elementul #2
- ...
- disc - marcator sub formă de cerc (exemplul a fost mai sus)
- cerc - marcator sub forma unui cerc transparent (exemplul a fost mai sus)
- pătrat - marcator sub formă de pătrat (exemplul a fost mai sus)
- zecimală - marcator sub forma unei liste numerotate cu cifre arabe: 1, 2, 3, ...
- zecimal-leading-zero - un marcator sub forma unei liste numerotate în cifre arabe cu un zero înainte: 01, 02, 03, ...
- inferior-roman - un marcator sub forma unei liste numerotate în alfabetul roman cu litere mici: i, ii, iii, iv, v
- upper-roman - marcator sub forma unei liste numerotate în alfabetul roman cu litere mari: I, II, III, IV, V
- low-latin - marker de listă alfabet latin cu litere mici: a, b, c, d, ...
- upper-latin - marcator sub forma unei liste în alfabetul latin cu majuscule: A, B, C, D, ...
- greacă inferioară - un marcator sub forma unei liste în alfabetul grecesc cu litere mici
- greacă superioară - un marcator sub forma unei liste în alfabetul grecesc cu majuscule
- . Când setați un atribut unei etichete
- toate elementele din listă vor fi afișate așa cum este indicat de atribut. Dar putem da unui element sau altul propriul său display. Exemplu din imagine:
- Elementul #1
- Elementul #2
- Elementul #3
- Elementul #1
- Elementul #2
- Elementul #3
- Elementul #1
- Elementul #2
- Elementul #3
- Elementul #1
- Elementul #2
- Elementul #3
Codul arată astfel:
Schimbarea marcatorilor de etichete
- folosind CSS
Elemente din lista marcatori create de etichetă
- , poate fi marcat cu imagini arbitrare. CSS este folosit pentru a schimba tipul de marker. De exemplu
Și așa arată pe pagină:
C folosind CSS putem seta alte tipuri de afișare a markerului. Dar trebuie să rețineți că atunci când specificați orice stil pentru o etichetă
- , se aplică tuturor elementelor listei.
Sintaxa etichetelor
Acest cod se traduce într-o listă cu marcatori pe site:
Etichetă
- cere utilizare obligatorie eticheta de inchidere
Pentru a forma elementele listei se folosește etichetă asociată. Între etichetele de deschidere și de închidere sunt cuvinte individuale, fraze, paragrafe, imagini, bucăți de cod și multe altele care sunt conținutul listei cu marcatori.
Care poate fi conținutul unei liste cu marcatori?Aceasta poate fi o varietate de texte, inclusiv cuvinte individuale, fraze și paragrafe, imagini, liste imbricate, bucăți de cod php și multe altele care necesită marcare simplă.
Fiecare element din listă cu marcatori este indentat implicit 40 de pixeli spre dreapta. Folosind stilurile CSS putem schimba afișarea această listă la propria discreție. Etichetă
- este bazat pe blocuri, deci ocupă întreaga zonă disponibilă, limitată de marginea ecranului, cadrul tabelului sau alte elemente ale paginii.
Sunt permise atașamentele List-in-a-list.
De exemplu
Atribute și proprietăți de etichetă
Atribut de etichetă utilizat pe scară largă
- este atribut tip, indicând cum va arăta marcatorul listei. Poate lua următoarele valori
1. type="disc" - marker sub forma unui cerc umplut (această valoare este implicită). Exemplul de disc a fost puțin mai înalt.
2. type="cercle" - marker sub forma unui cerc transparent
De exemplu:
3. type="square" - marker sub formă de pătrat
De exemplu:
Și iată cum arată pe pagină:
ÎN tip CSS markerul este specificat folosind atributul list-style-type:
Să ne uităm la ce valori poate lua tipul de listă:
Nota 2
Atributul poate fi atribuit etichetei în sine
- , și etichete
- ,
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ă și etichete principale care vă vor ajuta să transformați o listă simplă cu marcatori într-una 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 curs scurt despre Bazele 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 web pare destul de simplu: în stânga există o mică indențiune cu o linie și un marcator pătrat. Mai târziu în articol vom analiza în detaliu ce tipuri de marcatori există, 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 cu semnificații similare. Aceasta ar putea fi o listă de link-uri care au legătură cu același subiect, explicatie detaliata Pentru piese individuale text. Dar să vedem cum arată listele cu marcatori în cod:
Și așa arată în browser:
Orez. 1.1. Vedere standard Listă HTML neordonată cu marcatori în browser1.1 Marcatori standard pentru listele 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, apare ca un cerc umplut în browser. Există mai multe tipuri de marcatori în HTML: cerc umplut, cerc gol și pătrat. Nu necesită nicio imagine CSS sau terță parte:
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 atributul tip și am stabilit-o în lista noastră cu marcatori:
<html> <cap> <titlu > 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 > Soare</li> </ul> </corp> </html> Să vedem imediat cum va arăta acest cod în browser:
Orez. 1.2. Vedere a unui marcator de listă ca un cerc în browser1.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 unui marcator de listă ca pătrat în browserNotă importantă: Această metodă nu mai este folosită pentru a crea stiluri pentru listele cu marcatori. Există separare clară CSS (citește ce este CSS) și HTML. HTML este pentru marcaj și CSS pentru crearea unui aspect atractiv.
Cod care contine acest atribut, la specificarea tipului documentul curent ca HTML5(""), va da o eroare în timpul validării. Dacă nu ați auzit ce este validarea, atunci acesta este locul pentru dvs.
Eroarea va fi după cum urmează:
Orez. 1.4. Eroare pe validator la utilizarea atributului „type” al unei listeAm aranjat listele cu marcatori. Acum să trecem la liste numerotate, apoi să ne uităm la liste 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ă: Le numerotează automat. Acest lucru este util atunci când trebuie să numerotați lista mare. Făcând-o manual, va dura mult timp și tot poți fi confuz. O listă 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 > <p> De la unu 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ă: setări standard in browser:
Orez. 2.1. Lista numerotată în browser cu setări standardLa fel ca predecesorul său (lista de marcatori), are propriile stiluri de afișare a numerelor. Numerotarea regulată nu este singurul tip de marcatori pentru o listă numerotată în HTML.
2.1 Marcatori standard pentru liste numerotate
Aici avem de ales nu dintre trei tipuri de markere, ci dintre cinci:
Numele markerului valoarea atributului „type”. Exemplu de listă Marcatori sub formă de numere arabe 1 Marcatori ca litere mici litere latine A Marcatori sub formă de litere latine majuscule A Marcatori cu cifre romane minuscule i Marcatori cu cifre romane majuscule eu 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 atributul 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 > <p>Începem să numărăm de la douăsprezece:</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 va apărea pe site-ul real:
Orez. 2.2. Numerotarea de la orice numărî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 marcatori sub formă de litere latine mici. Acum, cred, a devenit clar cum să utilizați aceste atribute în proiectele dvs.
Ei bine, acum să trecem la listele HTML imbricate.
3. Cum se face o listă cu mai multe niveluri (imbricate) în HTML
Listele cu mai multe niveluri sunt folosite pe site pentru a construi meniuri. Acest meniu pare de cele mai multe ori să fie fie un meniu derulant în jos (lecție activată), fie un meniu derulant 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 > Lista marcatoare imbricate 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ă lista cu mai multe niveluri în browser:
Orez. 3.1. Exemplu de listă cu mai multe niveluri în HTMLAm făcut o listă cu mai multe niveluri folosind marcatori (tag
- ). O listă pe mai multe niveluri cu modele Citroen a apărut cu alți markeri. Lista principală are marcatoare pline, iar lista de nivel 2 are cercuri goale. Dar, după cum vă amintiți, folosind atributul „type” putem redefini marcatorii (este mai bine să setați ).
Dar ne putem uni liste cu mai multe niveluri numerotate și marcate 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 cu mai multe niveluri î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). În primul rând, este inclusă o listă cu două clase de lalele; o avem numerotată. Apoi, o listă cu marcatori este imbricată în fiecare dintre elementele din lista numerotată.
Să vedem cum arată în browser:
Orez. 3.2. Exemplu de listă numerotată cu mai multe niveluri la o listă cu marcatori în browser4. Materiale utile pe listele HTML
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 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 unei liste HTML într-un șir poate fi necesară la creare meniu orizontal. Este foarte ușor de făcut:
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ă centrați o listă în HTML
Elementul din 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 î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 Lista cu marcatori HTML marcatorul dvs
În acest caz, trebuie să conectați pictogramele fonturilor în avans (de exemplu, FontAwesome ). Apoi puteți crea orice pictogramă în loc de un marcator standard:
4.6 Cum se face o listă în HTML în mai multe coloane
Pentru a face o listă î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 înălțimea listei pentru a vedea împărțirea în mai multe coloane:
5. Exersați lucrul cu liste
În videoclipul de mai jos puteți vedea toate lucrările cu listele HTML în practică:
Liste cu marcatori vă permit să împărțiți textul mare în blocuri separate, fiecare dintre acestea începând cu un marcator - de obicei un punct mic. Acest lucru atrage atenția cititorului asupra textului și crește lizibilitatea acestuia.
Cu element
- Sunt asociate următoarele caracteristici:
Figura 1 prezintă rezultatul exemplului, ilustrând caracteristicile de mai sus ale listei cu marcatori.
Orez. 1. Vedere listă marcatori
Tip marker
Jetoanele pot accepta unul dintre trei tipuri: cerc umplut (implicit), cerc deschis și pătrat. Pentru a selecta tipul de marcator, utilizați proprietatea list-style-type sau proprietatea universal list-style (exemplul 1). Se aplică următoarele valori:
Exemplul 1: Modificarea aspectului unui marker
Liste Exemplul arată cum să creați o listă cu marcatori folosind un pătrat mic, de culoare solidă, 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 personaje speciale care pot acționa cu succes ca o pictogramă marcator. Înșurubați-le direct
- ,
Figura 7. Exemplu de lucru. În plus, în muncă nu știm întotdeauna ce element va urma elementul folosind float. Optiunea ideala ar fi inchiderea functionarii proprietatii float in acelasi bloc in care este deschisa.
Acest lucru se face folosind un pseudo element. Iată codul:
Listați pe orizontală Acum avem un cod de lucru 100%.
Figura 8. Exemplu de lucru. Această tehnică cu proprietatea float este de obicei folosită la proiectarea site-urilor web pentru a alinia coloanele create de etichete
. În acest fel obținem o construcție normală de stâlpi cu alinierea la înălțime necesară. Când creăm un meniu, în majoritatea cazurilor înălțimea blocurilor nu este importantă pentru noi; este aproape întotdeauna aceeași. Prin urmare, folosirea regulii (display: inline-block) în aceste cazuri este destul de justificată.Dar pentru caracterul complet al subiectului, ne-am familiarizat cu toate opțiuni posibile. Deși pot exista și alte modalități, de exemplu, folosind tabelele CSS, motoarele de căutare recomandă insistent utilizarea tabelelor numai în scopul propus, și nu pentru organizarea elementelor de navigare sau orice altceva.
Liste numerotate. Etichete
- Și
HTML 5 folosește trei tipuri de liste: liste numerotate, cu marcatori și liste de definiții.
Lista numerotata format dintr-o etichetă pereche
- (din engleza lista ordonata). Elementul „ol” în sine este folosit ca un container pentru elementele de listă care sunt formate din etichete pereche
La prima vedere, totul funcționează. Dar haideți să ne schimbăm listele. Să punem lista cu clasa meniu-1 în cod înaintea listei cu clasa meniu-2 (acum este mai jos).
Acesta este ceea ce obținem ca rezultat:
Figura 6. Exemplu de rulare. Elementele din meniul de jos se încadrează și în meniul de sus, deoarece efectul proprietății float nu a fost anulat și se aplică tuturor elementelor ulterioare.
Cum se rezolvă această problemă?
Pentru a face acest lucru, trebuie să utilizați proprietatea clear, aceasta anulează înfășurarea elementului în jurul altui element dacă are setată proprietatea float.
Iată un exemplu modificat de utilizare proprietățile clare :
Listați pe orizontală Se poate observa că lista de jos nu se mai înfășoară în jurul celei de sus, elementele nu se ciocnesc între ele. Dar în prima listă sunt etichete
- este, de asemenea, un element bloc.
