Eticheta ul specifică. Exemple de design elegant al listelor ul li CSS

Limbajul de marcare hipertext HTML are 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.

    Sintaxa etichetelor

      • Elementul #1
      • Elementul #2
      • Elementul #3
      • ...

      Acest cod se traduce într-o listă cu marcatori pe site:

      • Elementul #1
      • Elementul #2
      • Elementul #3

      Etichetă

      .

      Pentru a forma elementele listei se folosește etichetă asociată. Între etichetele de deschidere și de închidere există cuvinte individuale, fraze, paragrafe, imagini, bucăți de cod și multe altele care sunt conținutul unei liste 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

        • Elementul #1
          • Elementul #2-1
          • Elementul #2-2
          • Elementul #2-3
        • Elementul #3
        • ...

        Atribute și proprietăți de etichetă

          Atribut de etichetă utilizat pe scară largă

            este un atribut de tip care indică cum va arăta marcatorul de listă. 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:

            • Elementul #1
            • Elementul #2
            • Elementul #1
            • Elementul #2

            3. type="square" - marker sub formă de pătrat

            De exemplu:

            • Elementul #1
            • Elementul #2

            Și iată cum arată pe pagină:

            • Elementul #1
            • Elementul #2
            Nota 1

            În CSS, tipul marcator este specificat folosind atributul list-style-type:

            • ...

            Să ne uităm la ce valori poate lua tipul de listă:

            • 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 - marcator sub forma unei liste în alfabetul 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

            Nota 2

            Atributul poate fi atribuit etichetei în sine

              , și etichete
            • . 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:

                Codul arată astfel:

                • Elementul #1
                • Elementul #2
                • Elementul #3
                • Elementul #1
                • Elementul #2
                • Elementul #3

                Schimbarea marcatorilor de etichete
                  folosind CSS

                articole din lista marcatori, creat de tag

                  , poate fi marcat cu imagini arbitrare. CSS este folosit pentru a schimba tipul de marker. De exemplu

                  • Elementul #1
                  • Elementul #2
                  • Elementul #3

                  Și așa arată pe pagină:

                  • Elementul #1
                  • Elementul #2
                  • Elementul #3

                  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.

                    Bună ziua, dragi cititori! Astăzi, ca o continuare a seriei de articole de la rubrica „ Bazele HTML„Vreau să vă prezint algoritmul de creare liste html cu ajutor etichete ul și li (lista cu marcatori), ol și li (lista numerotată), dl, dt, dd (lista de definiții).

                    Acum voi continua să vă prezint cele mai des folosite cu etichete html, care sunt folosite pentru a crea liste pe paginile site-ului. Dacă cineva nu știe despre ce este vorba, cu siguranță după informațiile primite mai jos va înțelege imediat despre ce vorbim, deoarece această formă de prezentare a materialului este foarte comună.

                    Liste HTML cu marcatori - etichete ul și li

                    Listă cu puncte va defini eticheta ul. Între etichetele ul de deschidere și de închidere există elemente de listă, conținutul fiecăruia dintre acestea trebuie, la rândul său, să fie situat între etichetele de deschidere și de închidere. Permiteți-mi să observ imediat că eticheta ul este asociată (prezența unei etichete de deschidere și de închidere) și, de asemenea, la nivel de bloc, adică formează un container care include elemente (linii) formate de fiecare dată de eticheta li. În consecință, eticheta li este asociată și litere mici.

                    Mod implicit aspect markerul este reprezentat de un cerc umplut. Cu toate acestea, îi puteți modifica aspectul utilizând atributul type, care are următoarele valori: disc, cerc, pătrat. Valoarea discului (care determină aspectul markerului ca un cerc umplut) este implicită. Adică, dacă atributul tip nu este specificat, atunci aspectul marcatorului va arăta ca un cerc umplut. Dacă adăugăm aceste atribute la eticheta ul, obținem următoarele opțiuni:

                    Desigur, fiecare marker element individual Lista cu marcatori poate primi un aspect propriu prin specificarea valorilor adecvate pentru atributul tip.

                    Liste HTML numerotate - etichete ol și li

                    Acum să vedem cum se formează o listă numerotată folosind etichete ol (o etichetă bloc și pereche similară cu ul). Eticheta li este folosită aici și ca o etichetă care definește elementele unei liste numerotate în HTML. O listă numerotată este o colecție de elemente numerotate. Tipul de numerotare este determinat de atributul type, care poate lua următoarele valori:

                    • A - litere mari latine;
                    • a - litere latine mici;
                    • I - cifre romane majuscule;
                    • i - cifre romane minuscule;
                    • 1 - cifre arabe
                    1. 1 articol numerotat din listă
                    2. 2 elemente ale listei numerotate
                    3. Al treilea element al unei liste numerotate
                    1. 1 articol numerotat din listă
                    2. 2 elemente ale listei numerotate
                    3. Al treilea element al unei liste numerotate
                    1. 1 articol numerotat din listă
                    2. 2 elemente ale listei numerotate
                    3. Al treilea element al unei liste numerotate
                    1. 1 articol numerotat din listă
                    2. 2 elemente ale listei numerotate
                    3. Al treilea element al unei liste numerotate
                    1. 1 articol numerotat din listă
                    2. 2 elemente ale listei numerotate
                    3. Al treilea element al unei liste numerotate
                    1. 1 articol numerotat din listă
                    2. 2 elemente ale listei numerotate
                    3. Al treilea element al unei liste numerotate
                    1. 1 articol numerotat din listă
                    2. 2 elemente ale listei numerotate
                    3. Al treilea element al unei liste numerotate
                    1. 1 articol numerotat din listă
                    2. 2 elemente ale listei numerotate
                    3. Al treilea element al unei liste numerotate
                    1. 1 articol numerotat din listă
                    2. 2 elemente ale listei numerotate
                    3. Al treilea element al unei liste numerotate

                    De asemenea, este posibilă furnizarea unei liste numerotate, în care elementele sunt numerotate ordine inversă, de exemplu: 3, 2, 1. Acest lucru se face folosind atributul de rezervă al etichetei ol.

                    Există, de asemenea, opțiunea de a începe o listă cu marcatori de la orice număr, altul decât 1. Pentru a face acest lucru, puteți utiliza atributul start și nu contează la ce valoare este setat atributul de tip. Vedeți un exemplu de utilizare a atributului nume împreună cu sensuri diferite atribut tip (1 și I):

                    Liste de definiții HTML - etichete dl, dd, dt

                    Un alt tip de listă html este o listă de definiții. Se formează după cum urmează. Conținutul acestei liste se află între etichetele dl de deschidere și de închidere, care formează containerul. Eticheta dt definește un termen, iar eticheta dd descrie acel termen.

                    După cum puteți vedea, conținutul etichetei dt, care este un termen, este mutat la stânga, iar conținutul etichetei dd, care este o definiție acest termen, scris cu caractere cursive. Toate acestea se realizează prin folosire diverse stiluri css, despre care vom vorbi cu siguranță în publicațiile viitoare.

                    Apropo, realitățile moderne sunt astfel încât limba html nu poate fi considerat izolat de, prin urmare, pentru a nu rata aceste materiale importante, abonați-vă la actualizările blogului prin RSS sau prin e-mail. Aceasta încheie subiectul articolului de astăzi, dacă ați primit informatie necesara, nu refuzați să utilizați butoanele rețelelor sociale.

                    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 bloc sunt afișate cu linie nouăși creați un bloc dreptunghiular, un exemplu de astfel de etichete

                      sau

                      Deci iată eticheta

                    • este, de asemenea, un element bloc.

                      A eticheta

                    • nu sa comportat ca un element bloc, este posibil cu Ajutor CSS faceți-o cu litere mici.

                      Responsabil pentru modul în care elementul va fi afișat în document proprietate CSS afişa. 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 la proprietatea de afișare cu valoarea inline .

                      Listați pe orizontală

                      • Paragraful 1
                      • Punctul 2
                      • Punctul 3

                      Deci, acest stil a funcționat și am obținut o aranjare orizontală a elementelor din listă:

                      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ă modificăm codul nostru exemplu:

                      Listați pe orizontală

                      • Paragraful 1
                      • Punctul 2
                      • Punctul 3

                      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 aceeași înălțime pentru toate blocurile, dar nu ș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 . Asta înseamnă că au calități precum elemente de bloc(capacitatea de a specifica lățimea și înălțimea) și elementele 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 instalat Chenarul CSS litera cea mai înaltă, astfel încât să se vadă că de fapt nu există salturi, există spațiu gol între marginea superioară (de-a lungul căreia are loc alinierea) și punctul de sus al simbolului „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ă

                      • Paragraful 1
                      • Punctul 2
                      • Punctul 3

                      Iată rezultatul codului:

                      Figura 4. Exemplu de lucru.

                      Exemplul pare să funcționeze. Dar există un avertisment î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ă

                      • Paragraful 1
                      • Punctul 2
                      • Punctul 3
                      • Paragraful 1
                      • Punctul 2
                      • Punctul 3

                      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.

                        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 lucru.

                        Elementele din meniul de jos se încadrează, de asemenea, în jurul meniului 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 folosind proprietatea clear:

                        Listați pe orizontală

                        • Paragraful 1
                        • Punctul 2
                        • Punctul 3
                        • Paragraful 1
                        • Punctul 2
                        • Punctul 3

                        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

                      • sunt încă situate în afara containerului
                          .

                          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ă

                          • Paragraful 1
                          • Punctul 2
                          • Punctul 3
                          • Paragraful 1
                          • Punctul 2
                          • Punctul 3

                          Acum avem un cod de lucru 100%.

                          Figura 8. Exemplu de lucru.

                          Această tehnică cu proprietate de plutire folosit de obicei în aspectul site-ului 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ă cu tărie folosirea tabelelor numai în scopul propus, și nu pentru organizarea elementelor de navigare sau orice altceva.

                          O listă cu marcatori este definită prin adăugarea unui marcator mic, de obicei sub forma unui cerc umplut, înaintea 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

                            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 întotdeauna să îl adăugați la elementele din listă separate în mod clar.

                          Exemplul 11.1 arată 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

                          Acordați atenție căptușelii 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. Pentru a selecta un stil de marcator, utilizați atributul tip al etichetei

                            . Valorile acceptabile sunt date în tabel. 11.1

                            Masa 11.1. Listează stiluri de marcatori
                            Tip de listă cod HTML Exemplu
                            Lista cu marcatori de cerc

                            • Primul
                            • Al doilea
                            • Al treilea
                            Lista cu marcatori cerc

                            • Primul
                            • Al doilea
                            • Al treilea
                            Lista cu gloanțe pătrate

                            • Primul
                            • Al doilea
                            • Al treilea

                            Aspectul markerului poate 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 (opțional: budism, confucianism, hinduism). Oferta speciala- Iudaismul și Islamul împreună;
                            • o schimbare a credinței în infailibilitatea partidului favorit;
                            • credința că extratereștrii există;
                            • preferinta pentru un sistem politic ca fiind cel mai bun de acest gen (de a alege dintre: feudalism, socialism, comunism, capitalism).

                            Rezultatul acestui exemplu este prezentat în Fig. 11.2.

    • Serghei Savenkov

      un fel de recenzie „scurtă”... de parcă ne-am grăbi pe undeva