Etiketa ol përdoret për implementim. Listat me pika

Detyrë

Shfaqni një listë me pika horizontalisht pa pika.

Zgjidhje

Etiketa plumbash

shfaq elementet si parazgjedhje
• vertikalisht mbi njëra-tjetrën. Për të krijuar elementë lundrimi, në disa raste është e përshtatshme që lista të shfaqet horizontalisht. Ka disa mënyra për të arritur këtë shfaqje liste.

  Duhet ta dini tashmë se HTML ka elementë bllok dhe inline. Elementet inline nuk krijojnë blloqet e tyre; një shembull i elementeve të tillë janë etiketat ose . Elementet e bllokut shfaqen me linjë e re dhe krijoni një bllok drejtkëndor, një shembull i etiketave të tilla

  ose

  Pra, këtu është etiketa

• është gjithashtu një element blloku.

  Për të etiketuar

• nuk u soll si një element blloku, mund të përdorni CSS për ta bërë atë inline.

  Shfaqja e vetive CSS përcakton se si do të shfaqet elementi në dokument. Le të shqyrtojmë tre nga kuptimet e tij (edhe pse ka më shumë):

  • bllok - elementi shfaqet si element bllok.
  • inline - elementi shfaqet si inline.
  • inline-block - element block-line, lexoni më shumë për këtë lloj elementi më poshtë, ne do ta përdorim atë.

  Së pari, le të bëjmë një listë horizontale duke i kthyer pikat e saj në elementë të linjës. Në stilin CSS, le të shkruajmë një rregull në të cilin përzgjedhësi li vendoset të shfaqë pronën me vlerën inline .

  • Paragrafi 1
  • Pika 2
  • Pika 3

  Kështu që ky stil funksionoi dhe arritëm rregullimi horizontal lista e artikujve:

  Figura 1. Shembulli #1 në punë.

  Kjo metodë ka disavantazhe. Fakti është se elementët inline kanë disa kufizime në krahasim me elementët e bllokut. Për shembull, atyre nuk mund t'u jepet gjerësia dhe lartësia, por ato në bllok munden.

  Për shembull, ne kemi nevojë që elementi i menusë që krijojmë të ketë një gjerësi prej 150 px dhe një lartësi prej 40 px. Le të përpiqemi të ndryshojmë stilin në vijim, domethënë të shtojmë dy rregulla që vendosin madhësinë e artikullit të menusë:

  Këto modifikime nuk do të çojnë në asnjë ndryshim. Në mënyrë që artikujt e menysë të pozicionohen horizontalisht dhe të jenë në gjendje të caktojnë gjerësinë dhe lartësinë e tyre, ata duhet të vendosin llojin në "inline-block". Le të ndryshojmë kodin tonë shembull:

  • Paragrafi 1
  • Pika 2
  • Pika 3

  Ky kod funksionon dhe ndryshimet janë të dukshme:

  
  Figura 2. Shembulli nr. 2 në veprim.

  Por mund të ketë variante të ndryshme, për shembull, ne duhet të shfaqim listat e mbivendosura në meny:

  • Redakto
    • Anulo
    • Prerje
    • Kopjo
    • Fut
  • Shkronja e shkrimit
    • E guximshme
    • Kursivë
    • E nënvizuar
  • Madhësia
    • I vogël
    • Normale
    • Mesatare
    • I madh

  Këtu është rezultati i këtij kodi:

  
  Figura 3. Shembulli nr. 3 në punë.

  Ne shohim që blloqet nuk janë të rreshtuara në lartësi siç do të dëshironim. Sigurisht, mund të specifikoni për të gjitha blloqet të njëjtën lartësi, por jo gjithmonë ia dimë vlerën e saktë paraprakisht dhe mund të ndryshojë.

  Por në fakt, pse ndodh kjo?

  Blloqet tona kanë një veti të shfaqjes të vendosur në "inline-block". Kjo do të thotë se ata kanë cilësitë e elementeve të bllokut (aftësia për të specifikuar gjerësinë dhe lartësinë) dhe elementët e linjës. Ajo që po shohim është cilësia e elementeve inline.

  Le të shohim një varg me karaktere "A" të madhësive të ndryshme:

  A A A A A A A

  Ne shohim që të gjitha shkronjat janë të rreshtuara vertikalisht përgjatë vijës fundore. Më saktësisht, përgjatë vijës bazë, por le të mos hyjmë në barërat e këqija tani. Pra, e njëjta gjë ndodhi me blloqet tona.

  Për të rreshtuar tekstin vertikalisht, përdorni veçorinë vertikale të rreshtimit. Në shembullin tonë #3, ne duhet të përdorim vlerën top , e cila do të rreshtojë kufirin e sipërm të elementit me majën e elementit më të lartë në linjë.

  Tani për tani, le ta zbatojmë atë në një varg me karaktere "A" të madhësive të ndryshme:

  A A A A A A A

  Shkronjat duket se “kërcejnë” pak. E vendosa kufirin CSS në shkronjën më të lartë për të treguar se në fakt nuk ka kërcime, vetëm hapësirë ​​boshe midis kufirit të sipërm (ku ndodh shtrirja) dhe pikës së sipërme të "A".

  Vetia e rreshtimit vertikal duhet të zbatohet për secilën element inline, nuk është i trashëguar. Mund të lexoni më shumë për këtë pronë: vertikal-align .

  Pas këtij digresioni, ne do të vazhdojmë të vendosim elementët e listës horizontalisht.

  Mënyra e dytë

  Ju mund të vendosni artikujt e listës horizontalisht duke përdorur veçorinë float. Kjo veçori specifikon se në cilën anë është rreshtuar elementi dhe ka dy pozicione: majtas dhe djathtas.

  Këtu është një shembull duke përdorur këtë kod:

  • Paragrafi 1
  • Pika 2
  • Pika 3

  Këtu është rezultati i kodit:

  Figura 4. Shembull i punës.

  Shembulli duket se funksionon. Por ka një paralajmërim në përdorimin e kësaj prone. Tani do ta shikojmë. Për shembull, le të marrim një kod në të cilin janë dy listë horizontale Me në mënyra të ndryshme rregullimi i elementeve horizontalisht: shfaqja dhe notimi:

  • Paragrafi 1
  • Pika 2
  • Pika 3
  • Paragrafi 1
  • Pika 2
  • Pika 3

  Këtu është rezultati i kodit:

  Figura 5. Shembull i punës.

  Në këta shembuj kontejnerët e listës

  kanë një kufi të kuq 1 piksel të trashë. Por top lista, e cila përdor veçorinë e shfaqjes, përfshin artikujt e listës. Por elementët e një liste të krijuar duke përdorur veçorinë float bien nga kontejneri i tyre.

  Në shikim të parë, gjithçka funksionon. Por le të shkëmbejmë listat tona. Le të vendosim listën me klasën menu-1 në kod përpara listës me klasën menu-2 (tani është më e ulët).

  Kjo është ajo që marrim si rezultat:

  Figura 6. Shembull i punës.

  Artikujt në menynë e poshtme gjithashtu mbështillen rreth menysë së sipërme, sepse efekti i vetive float nuk është anuluar dhe zbatohet për të gjithë elementët pasues.

  Si të zgjidhet ky problem?

  Për ta bërë këtë, ju duhet të përdorni veçorinë clear, ajo anulon mbështjelljen e elementit rreth një elementi tjetër nëse ka të vendosur veçoritë float.

  Këtu është një shembull i modifikuar duke përdorur vetitë e qarta :

  • Paragrafi 1
  • Pika 2
  • Pika 3
  • Paragrafi 1
  • Pika 2
  • Pika 3

  Mund të shihet se lista e poshtme nuk mbështillet më atë të sipërme, elementët nuk përplasen me njëri-tjetrin. Por në listën e parë ka etiketa

  • janë ende të vendosura jashtë kontejnerit
    .
    Figura 7. Shembull i punës.

    Përveç kësaj, në punë nuk e dimë gjithmonë se cili element do të ndjekë elementin duke përdorur float. Opsioni ideal do të ishte mbyllja e funksionimit të pronës float në të njëjtin bllok në të cilin është e hapur.

    Kjo bëhet duke përdorur një pseudo element. Këtu është kodi:

    • Paragrafi 1
    • Pika 2
    • Pika 3
    • Paragrafi 1
    • Pika 2
    • Pika 3

    Tani kemi 100% kod pune.

    Figura 8. Shembull i punës.

    Kjo teknikë me veçorinë float zakonisht përdoret gjatë dizajnimit të faqeve të internetit për të lidhur kolonat e krijuara nga etiketat

    . Në këtë mënyrë fitojmë një ndërtim normal të kolonave me shtrirjen e kërkuar në lartësi. Kur krijojmë një menu, në shumicën e rasteve lartësia e blloqeve nuk është e rëndësishme për ne; është pothuajse gjithmonë e njëjtë. Prandaj, përdorimi i rregullit (ekrani: inline-block) në këto raste është mjaft i justifikuar.

    Por për plotësinë e temës, ne jemi njohur me të gjitha opsionet e mundshme. Megjithëse mund të ketë mënyra të tjera, për shembull, përdorimi i tabelave CSS, motorët e kërkimit rekomandojnë fuqimisht përdorimin e tabelave vetëm për qëllimin e tyre të synuar, dhe jo për organizimin e elementeve të navigimit ose ndonjë gjë tjetër.

    Listat e numëruara. Etiketa

    Dhe
    1. ,

    HTML 5 përdor tre lloje listash: lista të numëruara, të shënuara dhe me përkufizime.

    Lista e numëruar i formuar nga një etiketë e çiftuar

    (nga anglishtja lista e porositur). Vetë elementi "ol" përdoret si një enë për artikujt e listës që formohen nga etiketat e çiftuara

    1. Si parazgjedhje, artikujt e listës numërohen nga shfletuesi sipas radhës, duke filluar me një. Nëse numërimi duhet të fillojë nga diçka tjetër nga një, atëherë përdoret atributi start, i cili specifikon numrin nga i cili do të fillojë lista e numëruar. Atributi pranon numra të plotë si vlera. Ju gjithashtu mund të ndryshoni rendin e numrave. Kjo bëhet duke përdorur atributin e kundërt, i cili përdoret pa vlera. Atributi i futur HTML 5 dhe funksionon në të gjithë shfletuesit përveç IE.

       Është gjithashtu e mundur të vendosni pamjen shënues i listës së numëruar. Për ta bërë këtë, përdorni atributin tip, i cili mund të marrë vlerat "A | a | I | i | 1", që, në përputhje me rrethanat, do të thotë:

       • shkronja të mëdha latine,
       • shkronja të vogla latine,
       • numra romakë të mëdhenj,
       • numra romakë të vegjël,
       • Numrat arabë.

       Meqenëse të gjitha vlerat e listuara dhe më shumë, mund të vendosen lehtësisht nëpërmjet Stilet CSS, përdorimi i atributit tip, sipas autorit, nuk është i këshillueshëm, megjithëse lejohet në HTML 5.

       Përdorimi i një liste të numëruar tregohet në shembullin 2.10.

       Muajt ​​e pranverës me radhë:

       3. marsh
       4. prill
       5. Mund
       Muajt ​​e verës në rend i kundërt:
       8. gusht
       9. korrik
       10. qershor

       Shembulli 2.10. Duke përdorur elementin "ol".

       Nga rruga, shfletuesit shfaqin të gjitha listat si elementë blloku, kështu që kur shfaqni shembullin, mund të shihni qartë kufijtë vertikalë. Provoni të shkruani vetë kodin, jepini listave një sfond të verdhë dhe shikoni rezultatin.

       Listat me plumba. Etiketa

       Dhe
       • ,

       Lista me pika i formuar nga një etiketë e çiftuar

       (nga anglishtja lista e parenditur). Vetë elementi "ul" përdoret si një kontejner për artikujt e listës, të cilët formohen, si në rastin e listave të numëruara, nga etiketat e çiftuara.
       • dhe ndodhen njëri pas tjetrit.

         Një listë me pika përdor shënues rrethore në vend të numrave dhe shkronjave. Ju mund të ndryshoni pamjen e shënuesve duke përdorur stilet CSS. Sa i përket atributit tip, ai u hoq në HTML 5. Pra, mbeten vetëm atributet universale dhe atributet e ngjarjeve.

         Muajt ​​e pranverës:

         • marsh
         • prill
         • Mund

         Shembulli 2.11. Duke përdorur elementin "ul".

         Listat e përkufizimeve. Etiketa

         ,

         ,

         Lista e përkufizimeve i formuar nga një etiketë e çiftuar

         (nga anglishtja listë përkufizimesh). Vetë elementi "dl" përdoret si një enë për artikujt e listës. Çdo artikull i tillë, nga ana tjetër, përbëhet nga elementë "dt" (nga anglishtja. term përkufizim) dhe "dd" (nga anglishtja. përshkrimi i përkufizimit), i formuar, përkatësisht, nga etiketat e çiftuara

         Dhe

         . I pari përmban termin që përkufizohet, dhe i dyti përmban përkufizimin e termit.

         Le të shohim shembullin 2.12 për qartësi.

         HTML

         Gjuha standarde e shënjimit të hipertekstit për dokumentet në ueb
         i cili përdoret gjerësisht në World Wide Web.

         CSS

         Gjuha formale e përshkrimit pamjen dokument,
         shkruar duke përdorur gjuhën e shënjimit.

         Shembulli 2.12. Duke përdorur elementin "dl".

         Listat e mbivendosura

         Ndonjëherë bëhet e nevojshme për të krijuar listat e mbivendosura, të cilat janë lista të vendosura në artikujt e listës së jashtme. Le të shohim krijimin e listave të mbivendosura duke përdorur shembullin 2.13.

         1. Tre lloje të mollëve:
            • Antonovka,
            • Strefel,
            • Kuban.
         2. Tre lloje dardhash:
            1. Chizhovskaya,
            2. Williams,
            3. Dukeshë.

         Shembulli 2.13. Përdorimi i listave të ndërlidhura

         Siç mund ta shihni, krijimi i listave të mbivendosur nuk është aspak i vështirë. Për ta bërë këtë, duhet të jeni të kujdesshëm midis etiketës së hapjes

         dhe etiketa mbyllëse

         Për listat e numëruara dhe me pika, rregulloni listën e ndërthurur të llojit të kërkuar. Për listat e definicionit, lista e mbivendosur duhet të vendoset midis etiketës hapëse

         dhe etiketa mbyllëse

         . Kjo mund të jetë e nevojshme, për shembull, nëse duhet t'i jepni një termi disa përkufizime.

         Navigoni shpejt në faqet e tjera

         • Krijimi i listave në HTML. Etiketa
           ,
           ,
           • ,

             ,

             ,

           Diten e mire!

           Në këtë artikull, do të mësoni për të gjitha mundësitë e listave, do të kuptoni se si të krijoni një listë të numëruar dhe do t'ju ndihmojnë ta ktheni një listë të thjeshtë me pika në një më interesante dhe më të dukshme me pika arbitrare. Pas përfundimit të mësimit, do të kuptoni se ku përdoren listat dhe në çfarë rrethanash mund të përdoren ato.

           Ky artikull është i treti në këtë kurs të shkurtër mbi Bazat e HTML. Para leximit këtë mësim Unë rekomandoj të kaloni dy të mëparshmet:

           Artikulli sapo ka filluar dhe tashmë mund të vëreni përdorimin e një liste standarde me pika. Në faqen time të internetit duket mjaft e thjeshtë: në të majtë ka një dhëmbëzim të vogël me një vijë dhe një shënues katror. Më vonë në artikull do të shikojmë në detaje se çfarë lloje shënuesish ekzistojnë, si të bëni numra dhe gjithashtu si të bëni shënuesin tuaj.

           Në secilën pjesë të artikullit, krijimi i listave të caktuara do të shoqërohet me shpjegime të hollësishme për futjen e një liste të veçantë.

           1. Listat me pika në HTML

           Kjo lloj liste përdoret për të renditur në tekst një grup elementësh me kuptime të ngjashme. Kjo mund të jetë një listë lidhjesh që lidhen me të njëjtën temë, shpjegim i detajuar Për pjesë individuale teksti. Por le të shohim se si duken listat me pika në kod:

           Dhe kjo është se si duket në shfletues:

           Oriz. 1.1. Pamje standarde Lista e pa renditur me plumba HTML në shfletues

           1.1 Pikë standarde për listat me pika

           Në imazhin e mësipërm (Figura 1.1.) mund të shihni rrathët në fillim të çdo artikulli të menysë. Ky është shënuesi. Si parazgjedhje, shfaqet si një rreth i mbushur në shfletues. Ekzistojnë disa lloje shënuesish në HTML: rrethi i mbushur, rrethi bosh dhe katrori. Ata nuk kërkojnë ndonjë CSS ose imazhe të palëve të treta:

           1.2 Listoni shënuesin në formën e një rrethi bosh

           Ju i dini vlerat e atributeve, por tani le të shohim se si të bëjmë një listë me pika HTML në kod. Nga tabela e mësipërme, ne zgjodhëm vlerën e dytë "rrethi" për atributin tip dhe e vendosëm në listën tonë me pika:

           <html > <kokë > <titull > Shembull i një liste me pika me një shënues rrethi bosh</titull> </kokë> <trup > <p> Yjet:</p> <ul type = "rreth" > <li > Sirius</li> <li > Arkturi</li> <li > Polluksi</li> <li > Betelgeuse</li> <li > dielli</li> </ul> </trupi> </html>

           Le të shohim menjëherë se si do të duket ky kod në shfletues:

           Oriz. 1.2. Pamja e një shënuesi të listës si një rreth në shfletues

           1.3 Listoni shënuesin në formën e një katrori

           Le të shohim gjithashtu shembullin e fundit me një shënues katror për një listë HTML:

           Kushtojini vëmendje shënuesit, ai është bërë katror:

           Oriz. 1.3. Pamja e një shënuesi të listës si një katror në shfletues

           Shënim i rëndësishëm: Kjo metodë nuk përdoret më për të krijuar stile për listat me pika. ekziston ndarje e qartë CSS (lexoni se çfarë është CSS) dhe HTML. HTML është për shënim dhe CSS është për të krijuar një pamje tërheqëse.

           Kodi që përmban këtë atribut, kur specifikoni llojin dokument aktual si HTML5 (""), do të japë një gabim gjatë verifikimit. Nëse nuk keni dëgjuar se çfarë është vërtetimi, atëherë ky është vendi për ju.

           Gabimi do të jetë si më poshtë:

           Oriz. 1.4. Gabim në verifikuesin kur përdorni atributin "lloj" të një liste

           Ne i kemi renditur listat me pika. Tani le të kalojmë te listat e numëruara dhe më pas të shohim listat e ndërthurura dhe disa shembuj të gatshëm, të cilat përdoren më shpesh në faqet reale.

           2. Listat e numëruara në HTML

           Ndryshe nga lloji i mëparshëm i listave, listat e numëruara kanë një të tillë tipar i rëndësishëm: Ata i numërojnë automatikisht. Kjo është e dobishme kur ju duhet të numëroni listë e madhe. Bërja e tij me dorë do të marrë shumë kohë, dhe ju ende mund të hutoheni. Një listë e numëruar specifikohet duke përdorur etiketën. Si duket në praktikë:

           Shembull i një liste të numëruar:

           1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

           <html > <kokë > <titull > Shembull i një liste me numër standard</titull> </kokë> <trup > <p> Nga një në pesë:</p> <ol > <li > Së pari</li> <li > Së dyti</li> <li > Së treti</li> <li > Së katërti</li> <li > Së pesti</li> </ol> </trupi> </html>

           Ja si duket një listë e numëruar: cilësimet standarde në shfletues:

           Oriz. 2.1. Lista e numëruar në shfletues me cilësime standarde

           Ashtu si paraardhësi i tij (lista e pikave), ai ka stilet e veta për shfaqjen e numrave. Numërimi i rregullt nuk është lloji i vetëm i pikës për një listë të numëruar në HTML.

           2.1 Pikë standarde për listat e numëruara

           Këtu kemi një zgjedhje jo nga tre lloje shënuesish, por nga pesë:

           Emri i shënuesit	vlera e atributit "type".	Shembull Lista
           Shënues në formën e numrave arabë	1	Badminton Bejsbolli
           Shënuesit me shkronja të vogla Shkronjat latine	a	Chomolungma Chogori Kanchenjunga
           Shënues në formën e shkronjave të mëdha latine	A	Summit Plummet Rruga e tantrumit Insano
           Shenjat e numrave romakë të vegjël	i	Deti i Filipineve Deti Arabik deti koral
           Shenjat e numrave romakë të mëdhenj	I	E kuqe E gjelbër Blu

           2.2 Numërimi vetanak në listën HTML

           Përveç prodhimit të zakonshëm të një liste të numëruar, ne gjithashtu mund të fillojmë numërimin tonë nga çdo numër. Për ta bërë këtë, duhet të vendosni atributin shtesë "fillimi". Ky numërim funksionon në të gjitha llojet e shënuesve për listat e numëruara. Si duket në praktikë:

           1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

           <html > <kokë > <titull > Numërimi i personalizuar për një listë të numëruar</titull> </kokë> <trup > <p> Fillojmë të numërojmë nga dymbëdhjetë:</p> <ol type = "a" start = "12" > <li > Dymbëdhjetë</li> <li > trembëdhjetë</li> <li > Katërmbëdhjetë</li> <li > Pesëmbëdhjetë</li> <li > Gjashtëmbëdhjetë</li> </ol> </trupi> </html>

           Ja se si do të shfaqet në faqen reale:

           Oriz. 2.2. Numërimi nga çdo numër në një listë të numëruar

           Në imazhin e mësipërm, ne numëruam listën duke filluar nga dymbëdhjetë, duke bërë markera në formën e shkronjave të vogla latine. Tani, mendoj, është bërë e qartë se si t'i përdorni këto atribute në projektet tuaja.

           Epo, tani le të kalojmë te listat e mbivendosura HTML.

           3. Si të bëni një listë me shumë nivele (të mbivendosur) në HTML

           Listat me shumë nivele përdoren në sajt për të ndërtuar meny. Kjo meny më së shpeshti duket të jetë ose një meny rënëse poshtë (mësimi në) ose një meny rënëse majtas ose djathtas. Meny të tilla ju lejojnë të ruani elementë të tjerë të menysë në një formë kompakte.

           Duke përdorur modelet e makinave si shembull, ne do të ndërtojmë një listë me shumë nivele 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 > <kokë > <titull > Lista e pikave të mbivendosura HTML</titull> </kokë> <trup > <ul > <li > Citroen<ul > <li > Berlingo</li> <li > C1</li> <li > C2</li> <li > C3 Pikaso</li> <li > C4 Grand Picasso</li> </ul> </li> <li > AKI</li> <li > Toyota</li> <li > Audi</li> <li > Lexus</li> </ul> </trupi> </html>

           Vini re se si duket lista me shumë nivele në shfletues:

           Oriz. 3.1. Shembull i një liste me shumë nivele në HTML

           Ne bëmë një listë me shumë nivele duke përdorur pika (etiketë

           ). Një listë me shumë nivele me modelet Citroen u shfaq me shënues të tjerë. Lista kryesore ka pika të mbushura, dhe lista e nivelit të dytë ka rrathë bosh. Por, siç e mbani mend, duke përdorur atributin "lloj" ne mund të ripërcaktojmë shënuesit (është më mirë të vendosni ).

           Por ne mund të bashkohemi listat me shumë nivele numërohen dhe shënohen si më poshtë:

           1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

           <html > <kokë > <titull > Listat e numëruara, me pika dhe me shumë nivele në HTML</titull> </kokë> <trup > <ul > <li > Grupi i parë i tulipanëve<ol > <li > Klasa e parë<ul > <li > Tulipanët e thjeshtë të hershëm</li> </ul> </li> <li > Klasa e dyte<ul > <li > Tulipanët Terry</li> </ul> </li> </ol> </li> </ul> </trupi> </html>

           Në shembullin e mësipërm kemi folezim të dyfishtë (2 nivele). Së pari, është përfshirë një listë me dy klasa tulipanësh; ne e kemi atë të numëruar. Pastaj një listë me pika vendoset brenda secilit prej artikujve në listën e numëruar.

           Le të shohim se si duket në shfletues:

           Oriz. 3.2. Shembull i një liste të numëruar me shumë nivele në një listë me pika në shfletues

           4. Materiale të dobishme në listat HTML

           Ky është informacion që kërkon një kuptim të vetive të CSS. Për ta bërë këtë, unë rekomandoj të studioni mësimet e mëposhtme: . Të gjithë shembujt do të jenë menjëherë me Kodi i burimit dhe ndahen në skeda HTML (strukturë), CSS (stile) dhe Rezultat (rezultat).

           4.1 Si të bëni një listë HTML në një varg

           Bërja e një liste HTML në një varg mund të jetë e nevojshme gjatë krijimit menu horizontale. Është shumë e lehtë për të bërë:

           4.2 Si të krijoni një listë HTML pa ikonë

           Vetia e tipit të stilit të listës në CSS është përgjegjëse për këtë (më shumë detaje):

           4.3 Si të vendosim në qendër një listë në HTML

           Artikulli i listës është një element blloku, kështu që duhet të përqendrohet duke përdorur kufijtë. Por ka një pikë e rëndësishme- duhet të specifikojmë në mënyrë eksplicite gjerësinë që shtrirja të funksionojë:

           4.4 Si të bëni një listë në HTML me fotografi

           Mjafton vetëm një pronë CSS list-style-image. Brenda url-së, specifikoni adresën përpara ikonës. Thjesht dua të vërej se është më mirë të zgjidhni menjëherë një imazh të vogël, sepse lartësia e rreshtit të listës varet nga ajo:

           4.5 Lista me pika HTML plumbin tuaj

           Në këtë rast, duhet të lidhni paraprakisht ikonat e shkronjave (për shembull, FontAwesome). Atëherë mund të krijoni çdo ikonë në vend të një shënuesi standard:

           4.6 Si të bëni një listë në HTML në disa kolona

           Për të bërë një listë në disa kolona do të përdorim Vetia CSS numërimi i kolonave (vetia mbështetet vetëm në shfletuesit e mëposhtëm: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Ju gjithashtu duhet të vendosni lartësinë e listës për të parë ndarjen në kolona të shumta:

           5. Praktikoni punën me listat

           Në videon më poshtë mund të shihni të gjithë punën me listat HTML në praktikë:

           Listat me pika ju lejon të ndani tekstin e madh në blloqe të veçanta, secila prej të cilave fillon me një shënues - zakonisht një pikë të vogël. Kjo tërheq vëmendjen e lexuesit te teksti dhe rrit lexueshmërinë e tij.

           Me element

           Karakteristikat e mëposhtme janë të lidhura:
           • në vendin ku ndodh
             , shfletuesi automatikisht shton një ndërprerje të linjës;
             • lista ka dhëmbëza në krye dhe në fund;
             • Si parazgjedhje, shënuesit shfaqen si një rreth i mbushur;
             • Çdo element i listës zhvendoset djathtas në lidhje me tekstin kryesor.

             Figura 1 tregon rezultatin e shembullit, duke ilustruar tiparet e mësipërme të listës me pika.

             Oriz. 1. Pamja e listës së pikave

             Lloji i shënuesit

             Shenjat mund të pranojnë një nga tre lloje: rrethi i mbushur (i parazgjedhur), rrethi i hapur dhe katrori. Për të zgjedhur llojin e shënuesit, përdorni veçorinë e tipit list-style ose tiparin universal të stilit të listës (shembulli 1). Vlerat e mëposhtme zbatohen:

             • disk - shënues në formën e një rrethi të mbushur;
             • rrethi - shënues në formën e një rrethi të hapur;
             • shënues katror - katror.

             Shembulli 1: Ndryshimi i pamjes së një shënuesi

             • Sepulki
             • Sepulcaria
             • Sepulenimi

             Shembulli tregon se si të krijoni një listë me pika duke përdorur një katror të vogël me ngjyrë të fortë si ikonë e pikës. Edhe pse numri i vlerave është i kufizuar në tre, kjo nuk do të thotë që ne kemi në dispozicion vetëm tre lloje shënuesish. Ka shumë karaktere speciale që mund të veprojnë me sukses si një ikonë shënuesi. Vidhosini ato drejtpërdrejt në

           • Nuk do të funksionojë, kështu që do të duhet të punoni rreth tij. Për ta bërë këtë, fshihni shënuesit e listës duke përdorur vetitë e stilit të listës me vlerën asnjë dhe në tekst para përmbajtjes
           • Ne shtojmë karakterin tonë duke përdorur pseudoelementin ::para. Në shembullin 2, një shënues i tillë është një trekëndësh.

             Shembulli 2: Përdorimi::para

             • Sepulki
             • Sepulcaria
             • Sepulenimi

             Rezultati ky shembull treguar në Fig. 2. Meqenëse përdorimi i vetive të stilit list me vlerën none nuk i heq fare shënuesit, por vetëm i fsheh nga pamja, lista shfaqet e zhvendosur djathtas. Për të hequr qafe këtë veçori, shembulli shton veçorinë tekst-indent me vlerë negative. Detyra e tij është të lëvizë tekstin në një karakter të majtë.

             

             Oriz. 2. Shënues arbitrar në listë

             Karakteri nuk duhet të jetë në format heksadecimal; ai mund të futet drejtpërdrejt në tekst. Gjëja kryesore është të ruani dokumentin në kodimin UTF-8 dhe që redaktori ta mbështesë atë. Vetë personazhet dhe kodet e tyre mund të merren, për shembull, nga LibreOffice Writer (Fig. 3).

             

             Oriz. 3. Përzgjedhja e një simboli në LibreOffice

             Lista me shënues të vizatuar me dorë

             Stilet ju lejojnë të vendosni çdo shënues si shënues. imazh i përshtatshëm nëpërmjet veçorisë list-style-image. Vlera është relative ose rrugë absolute te skedar grafik, siç tregohet në shembullin 3.

             Shembulli 3: Përdorimi i një imazhi si shënues

             • Sepulki
             • Sepulcaria
             • Sepulenimi

             Vizatimi është më i miri për të zgjedhur madhësia e vogël për të shmangur kthimin e artikujve të listës në tituj. Në Fig. Figura 4 tregon rezultatin e një shembulli të përdorimit të fotografive të vogla si shënues.

             

             Oriz. 4. Vizatim si shënues

             Përdorimi i imazhit të stilit të listës ka disa disavantazhe:

             • modeli nuk mund të zhvendoset lart ose poshtë;
             • V shfletues të ndryshëm Pozicioni i figurës në raport me tekstin mund të ndryshojë.

             Këto mangësi mund të shmangen duke përdorur veçorinë e sfondit, ajo vendos imazhi i sfondit. Për çdo element të listës

           • heqim shënuesit origjinal dhe vendosim foto sfondi asnjë përsëritje. Dhe në mënyrë që teksti të mos shfaqet në krye të figurës, ne e zhvendosim atë në të djathtë duke përdorur padding-left (shembulli 4).

             Shembulli 4: Përdorimi i sfondit

             Ul (diferencë-majtas: -1em; ) li (stili i listës: asnjë; sfondi: url(images/bullet.png) pa përsëritje 0 2px; mbushje-majtas: 20px; )

             Pozicioni i tekstit dhe pikës

             Ka dy mënyra për të vendosur një shënues në lidhje me tekstin: shënuesi zhvendoset jashtë kufirit të elementeve të listës ose mbështillet rreth tekstit (Fig. 5).

             brenda	jashtë

             Oriz. 5. Vendosja e shënuesve në lidhje me tekstin

             Për të kontrolluar pozicionin e shënuesve, përdorni veçorinë list-style-position. Ka dy kuptime: jashtë - pikat vendosen jashtë bllokut të tekstit (kjo është vlera e paracaktuar) dhe brenda - pikat janë pjesë e bllokut të tekstit dhe shfaqen në artikullin e listës (shembulli 5).

             Shembulli 5: Ndryshimi i pozicionit të shënuesve

             • Përpara se të filloni, kontrolloni që pajisjet e përfshira me kompletin 3BM janë të përfshira.
             • Në mungesë të një ose më shumë pajisjet periferike Duhet të kontaktoni menjëherë stafin teknik të VT-ve.
             • Pas inspektimit metodat vizuale Nga vendi juaj i punës, mund të ndizni me kujdes rrymën në 3BM.

             Rezultati i këtij shembulli është paraqitur në Fig. 6.

             

             Në gjuhën e shënjimit Hiperteksti HTML ka një etiketë

             , përdoret për të krijuar lista me pika. Ajo mbështetet nga të gjithë shfletues modern dhe ju lejon të shfaqni elementet në një rend që nuk kërkon numërim. Për shembull, shumë shpesh shfaq artikujt e menusë dhe gjithçka që lidhet me listat në faqe: enët, produktet, pajisjet, mjetet dhe shumë më tepër që duhet të renditen pa treguar përparësinë e një artikulli të caktuar.

             Sintaksa e etiketës

             • Elementi numër 1
             • Elementi numër 2
             • Elementi numër 3
             • ...

             Ky kod përkthehet në një listë me pika në sit:

             • Elementi numër 1
             • Elementi numër 2
             • Elementi numër 3

             Etiketë

             kërkon përdorim i detyrueshëm etiketa mbyllëse
             .

             Për të formuar elementet e listës përdoret etiketë e çiftuar. Midis etiketave hapëse dhe mbyllëse janë fjalë individuale, fraza, paragrafë, imazhe, pjesë të kodit dhe shumë më tepër që janë përmbajtja e listës me pika.

             Cila mund të jetë përmbajtja e një liste me pika?

             Ky mund të jetë një shumëllojshmëri tekstesh, duke përfshirë fjalë të vetme, fraza dhe paragrafë, imazhe, lista të mbivendosura, pjesë të kodit php dhe shumë më tepër që kanë nevojë për shënime të thjeshta.

             Secili artikull i listës me pika është i prerë si parazgjedhje 40 pikselë në të djathtë. Duke përdorur stilet CSS ne mund të ndryshojmë ekranin këtë listë sipas gjykimit tuaj. Etiketë

             është i bazuar në bllok, kështu që zë të gjithë zonën e disponueshme për të, e kufizuar nga skaji i ekranit, korniza e tabelës ose elementë të tjerë të faqes.
             Lejohen bashkëngjitjet e listës brenda një liste.

             Për shembull

             • Elementi numër 1
             • • Artikulli #2-1
               • Elementi #2-2
               • Elementi #2-3
             • Elementi numër 3
             • ...

             Etiketoni Atributet dhe Vetitë

             Atributi i etiketës i përdorur gjerësisht

             është tip atribut, duke treguar se si do të duket shënuesi i listës. Mund të marrë vlerat e mëposhtme

             1. type="disc" - shënues në formën e një rrethi të mbushur (kjo vlerë është e paracaktuar). Shembulli i diskut ishte pak më i lartë.

             2. type="circle" - shënues në formën e një rrethi transparent

             Për shembull:

             • Elementi numër 1
             • Elementi numër 2

             • Elementi numër 1
             • Elementi numër 2

             3. type="square" - shënues në formë katrori

             Për shembull:

             • Elementi numër 1
             • Elementi numër 2

             Dhe ja se si duket në faqe:

             • Elementi numër 1
             • Elementi numër 2
             Shënim 1

             NË Lloji CSS shënuesi specifikohet duke përdorur atributin list-style-type:

             • ...

             Le të shohim se çfarë vlerash mund të marrë lloji i stilit të listës:

             • disk - shënues në formën e një rrethi (shembulli ishte më lart)
             • rrethi - shënues në formën e një rrethi transparent (shembulli ishte më lart)
             • katror - shënues në formën e një katrori (shembulli ishte më lart)
             • dhjetore - shënues në formën e një liste të numëruar me numra arabë: 1, 2, 3, ...
             • dhjetore-zero kryesore - një shënues në formën e një liste të numëruar me numra arabë me një zero kryesore: 01, 02, 03, ...
             • i ulët-romak - një shënues në formën e një liste të numëruar në alfabetin romak me shkronja të vogla: i, ii, iii, iv, v
             • upper-roman - shënues në formën e një liste të numëruar në alfabetin romak me shkronja të mëdha: I, II, III, IV, V
             • shënues i listës në latinisht të ulët Alfabeti latin me shkronja të vogla: a, b, c, d, ...
             • latinishtja e sipërme - shënues në formën e një liste në alfabetin latin me shkronja të mëdha: A, B, C, D, ...
             • greqisht e ulët - një shënues në formën e një liste në alfabetin grek me shkronja të vogla
             • greqisht e sipërme - një shënues në formën e një liste në alfabetin grek me shkronja të mëdha

             Shënim 2

             Atributi mund t'i caktohet vetë etiketës

             , dhe etiketat
             • . Kur vendosni një atribut në një etiketë
               të gjithë artikujt e listës do të shfaqen siç tregohet nga atributi. Por ne mund t'i japim këtij apo atij elementi shfaqjen e vet. Shembull në foto:

               Kodi duket si ky:

               • Elementi numër 1
               • Elementi numër 2
               • Elementi numër 3

               • Elementi numër 1
               • Elementi numër 2
               • Elementi numër 3

               Ndryshimi i shënuesve të etiketave

               duke përdorur CSS

               Artikujt e listës së pikave të krijuara nga etiketa

               , mund të shënohet me imazhe arbitrare. CSS përdoret për të ndryshuar llojin e shënuesit. Për shembull

               • Elementi numër 1
               • Elementi numër 2
               • Elementi numër 3

               Dhe kjo është se si duket në faqe:

               • Elementi numër 1
               • Elementi numër 2
               • Elementi numër 3

               C duke përdorur CSS ne mund të vendosim lloje të tjera të shfaqjes së shënuesve. Por duhet të mbani mend këtë kur specifikoni ndonjë stil për një etiketë

               , zbatohet për të gjithë elementët e listës.