Dallimi i vetëm është se kjo etiketë është bërë rreptësisht për numërimin e listave. Emri i etiketës vjen nga shkurtesa angleze "Lista e renditur" - lista e numëruar.
Sintaksa e etiketës
- Artikulli # 1
- Artikulli # 2
- Artikulli # 3
- ...
Ku atributi tip = "vlerë" mund të marrë vlerat e mëposhtme
- A - vendos shënues në formën e shkronjave latine të mëdha (A, B, C ..);
- a - vendos shënues në formën e shkronjave të vogla latine (a, b, c ..);
- I - vendos shënues në formën e numrave të mëdhenj romakë (I, II, III, IV ..);
- i - specifikon shënuesit në formën e numrave të vegjël romakë (i, ii, iii, iv ..);
- 1 (parazgjedhja) - specifikon shënuesit në formën e numrave arabë (1, 2, 3 ..);
Atributi start = "value" vendos vlerën fillestare (vlerën fillestare) të raportit.
Atributi i kundërt specifikon një numërim të kundërt (nëse është e nevojshme).
Etiketë
- kërkon përdorimin e detyrueshëm të një etikete fundore
Një etiketë e çiftuar përdoret për të formuar artikujt e listës
shënim
Brenda listës, mund ta ndryshoni llogarinë në tuajën. Për këtë, ekziston një vlerë e veçantë e atributit = "" për etiketën
- Artikulli # 1
- Artikulli # 2
- Artikulli # 3
Shembuj me lista të numëruara në html ( )
Shembull 1. Lista html e numëruar në formën e shkronjave latine
Shembull me shkronja të mëdha
- Artikulli # 1
- Artikulli # 2
- Artikulli # 3
- Artikulli # 1
- Artikulli # 2
- Artikulli # 3
Shembull me shkronja të vogla
- Artikulli numër 10
- Artikulli # 11
- Artikulli # 12
Kështu duket në faqe:
- Artikulli # 1
- Artikulli # 2
- Artikulli # 3
Shembulli 2. Lista html e numëruar me shkronja romake
Shembull me shkronja të mëdha
- Artikulli # 1
- Artikulli # 2
- Artikulli # 3
Kështu duket në faqe:
- Artikulli # 1
- Artikulli # 2
- Artikulli # 3
Shembull me shkronja të vogla
- Artikulli # 1
- Artikulli # 2
- Artikulli # 3
Kështu duket në faqe:
- Artikulli # 1
- Artikulli # 2
- Artikulli # 3
Shembulli 3. Lista e numrave html e pozicioneve të ndryshme të fillimit
Një shembull që tregon aftësitë e atributit start, i cili ju lejon të vendosni vlerën fillestare të numëruesit.
- Artikulli # 1
- Artikulli # 2
- Artikulli # 3
Kështu duket në faqe:
- Artikulli # 1
- Artikulli # 2
- Artikulli # 3
Shembulli 4. Ndryshimi i llogarisë në listat html të numëruara
Më poshtë është një shembull me aftësinë për të ndryshuar vlerat e numëruesit duke përdorur atributin e vlerës kur shfaqen elementë të rinj në etiketa
- Artikulli # 1
- Artikulli # 2
- Artikulli # 3
- Artikulli # 4
Kështu duket në faqe:
- Artikulli # 1
- Artikulli # 2
- Artikulli # 3
- Artikulli # 4
Shembulli 5. Lista me numër të kthyeshëm në html
Më poshtë është një shembull i një liste me numër të kundërt (duke numëruar në rend të kundërt).
- Artikulli # 1
- Artikulli # 2
- Artikulli # 3
- Artikulli # 4
Kështu duket në faqe:
- Artikulli # 1
- Artikulli # 2
- Artikulli # 3
- Artikulli # 4
Detyrë
Shfaqni një listë me pika horizontalisht pa pika.
Zgjidhje
Etiketa e listës me pika
- si parazgjedhje nxjerr artikuj
- 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ë marrë këtë shfaqje të listës.
Tashmë duhet të jeni të vetëdijshëm se HTML përmban elemente bllok dhe inline. Elementet inline nuk krijojnë blloqet e tyre, shembuj të elementëve të tillë janë etiketat ose ... Elementet e bllokut shfaqen në një linjë të re dhe krijojnë një bllok drejtkëndor, një shembull i etiketave të tilla
osePra, etiketa
- është gjithashtu një element blloku.
Për të etiketuar
- nuk sillet si një element blloku, mund të përdorni CSS për ta bërë atë inline.
Vetia e shfaqjes CSS është përgjegjëse për mënyrën se si elementi do të shfaqet në dokument. Le të shqyrtojmë tre nga vlerat e tij (edhe pse ka më shumë prej tyre):
- bllok - elementi shfaqet si bllok.
- inline - elementi shfaqet si inline.
- inline-block - element bllok-inline, lexoni më shumë për këtë lloj elementi më poshtë, ne do ta përdorim atë.
Së pari, le të krijojmë një listë horizontale duke i kthyer artikujt e saj në elementë të linjës. Në stilin CSS, ne do të shkruajmë një rregull në të cilin vetia e shfaqjes vendoset në përzgjedhësin li me vlerën inline.
Listoni horizontalisht Pra, ky stil funksionoi dhe i mori artikujt e listës horizontalisht:
Figura 1. Puna e shembullit # 1.
Kjo metodë ka disavantazhe. Kjo është për shkak 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 duam që elementi i menusë që po 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 për vendosjen e madhësisë së artikullit të menusë:
Këto modifikime nuk do të rezultojnë 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, ato duhet të vendosen në llojin e bllokut inline. Le të ndryshojmë kodin e shembullit tonë:
Listoni horizontalisht Ky kod funksionon dhe ndryshimet janë të dukshme:
Figura 2. Puna e shembullit # 2. Por mund të ketë opsione të ndryshme, për shembull, ne duhet të shfaqim listat e mbivendosura në meny:
Lista e mbivendosur. Këtu është dalja e këtij kodi:
Figura 3. Puna e shembullit №3. Ne shohim që blloqet nuk janë të rreshtuara në lartësi ashtu siç do të donim. Sigurisht, ju mund të specifikoni të njëjtën lartësi për të gjitha blloqet, por ne nuk e dimë gjithmonë vlerën e saj të saktë paraprakisht dhe mund të ndryshojë.
Por në fakt, pse po ndodh kjo?
Blloqet tona kanë një veti të shfaqjes të vendosur në "inline-block". Kjo do të thotë se ato 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ë hedhim një vështrim në një varg me karaktere "A" të madhësive të ndryshme:
A A A A A A A
Mund të shohim se të gjitha shkronjat janë të lidhura vertikalisht me vijën fundore. Më saktësisht, përgjatë vijës bazë, por tani nuk do të futemi në xhungël. Pra, e njëjta gjë ndodhi me blloqet tona.
Vetia vertikale align përdoret për të lidhur tekstin vertikalisht. Në shembullin tonë # 3, ne duam të përdorim vlerën lart, e cila do të rreshtojë kufirin e sipërm të elementit me pjesën e sipërme të elementit më të lartë në rresht.
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
Duket se shkronjat “kërcejnë” pak. E vendosa kufirin CSS në shkronjën më të lartë në mënyrë që të shihni se në të vërtetë nuk ka kërcim, ka një hapësirë boshe midis kufirit të sipërm (përgjatë të cilit ndodh shtrirja) dhe pikës së sipërme të karakterit "A".
Vetia e rreshtimit vertikal duhet të zbatohet për çdo element inline, ajo nuk trashëgohet. Mund të lexoni më shumë për këtë pronë: vertikal-align.
Pas këtij digresioni, ne do të vazhdojmë të rregullojmë artikujt e listës horizontalisht.
Mënyra e dytë
Ju mund të vendosni artikujt e listës horizontalisht duke përdorur veçorinë float. Kjo veti tregon se në cilën anë është rreshtuar elementi, ka dy pozicione: majtas dhe djathtas.
Këtu është një shembull duke përdorur këtë kod:
Listoni horizontalisht Këtu është dalja e kodit:
Figura 4. Puna e shembullit. Shembulli duket se funksionon. Por ka një paralajmërim në përdorimin e kësaj prone. Do ta shikojmë tani. Për shembull, le të marrim një kod në të cilin ka dy lista horizontale me mënyra të ndryshme të rregullimit të elementeve horizontalisht: shfaqja dhe notimi:
Listoni horizontalisht Këtu është dalja e kodit:
Figura 5. Puna e shembullit. Në këta shembuj, kontejnerët e listës
- kanë një kufi të kuq 1 piksel. Por lista kryesore, e cila përdor veçorinë e shfaqjes, përfshin artikujt e listës. Por elementët e listës të krijuar duke përdorur veçorinë float bien nga kontejneri i tyre.
- janë ende jashtë kontejnerit
-
.
- në vendin ku takohet
- , shfletuesi automatikisht shton një ndërprerje të linjës;
- lista ka pikat e sipërme dhe të poshtme;
- shënuesit shfaqen si një rreth i mbushur si parazgjedhje;
- çdo element i listës zhvendoset djathtas në raport me tekstin kryesor.
- disk - shënues në formën e një rrethi të mbushur;
- rrethi - shënues në formën e një rrethi të hapur;
- shenjues katror - katror.
- Sepulki
- Sepulcaria
- Sepulenie
- nuk do të funksionojë, kështu që ju duhet të punoni rreth tij. Për ta bërë këtë, fshihni shënuesit e listës duke përdorur veçorinë e stilit të listës me një vlerë prej asnjë dhe në tekstin përpara përmbajtjes.
- shtoni simbolin tonë duke përdorur :: përpara pseudo-elementit. Në shembullin 2, trekëndëshi përdoret si një shënues i tillë.
Shembulli 2. Duke përdorur :: përpara
Listat - Sepulki
- Sepulcaria
- Sepulenie
Rezultati i këtij shembulli është paraqitur në Fig. 2. Meqenëse përdorimi i veçorisë së stilit të listës me vlerën asnjë nuk i heq fare shënuesit, por vetëm i fsheh ato nga pamja, lista zhvendoset në të djathtë. Për të hequr qafe këtë veçori, shembulli shton një veçori negative të indenteve të tekstit. 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ë simbolet 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 imazh të përshtatshëm si shënues përmes veçorisë list-style-image. Vlera është një rrugë relative ose absolute për skedarin grafik, siç tregohet në shembullin 3.
Shembulli 3. Përdorimi i një imazhi si shënues
Listat - Sepulki
- Sepulcaria
- Sepulenie
Është mirë të zgjidhni një figurë të vogël në mënyrë që të mos i ktheni artikujt e listës në tituj. Në fig. 4 tregon rezultatin e shembullit të përdorimit të figurave të vogla si shënues.
Oriz. 4. Vizatim si shënues
Përdorimi i imazhit të stilit të listës ka disa disavantazhe:
- vizatimi nuk mund të zhvendoset lart ose poshtë;
- në shfletues të ndryshëm, pozicioni i figurës në lidhje me tekstin mund të ndryshojë.
Kjo mund të shmanget duke përdorur veçorinë e sfondit, e cila vendos imazhin e sfondit. Për çdo artikull të listës
- ne heqim shënuesit origjinalë dhe vendosim imazhin e sfondit pa u përsëritur. Dhe në mënyrë që teksti të mos shfaqet në krye të figurës, ne e zhvendosim atë në të djathtë përmes mbushjes-majtas (shembulli 4).
Shembulli 4. Përdorimi i sfondit
Ul (diferencë-majtas: -1em;) li (stili i listës: asnjë; sfondi: url (imazhe / bullet.png) pa përsëritje 0 2px; mbushje-majtas: 20px;)
Pozicioni i tekstit dhe shënuesi
Ka dy mënyra për të pozicionuar shënuesin në lidhje me tekstin: shënuesi zhvendoset jashtë kufirit të artikujve të listës ose mbështillet rreth tekstit (Fig. 5).
brenda jashtë Oriz. 5. Vendosja e markerëve në lidhje me tekstin
Vetia list-style-position përdoret për të kontrolluar pozicionin e shënuesve. Ka dy kuptime: jashtë - shënuesit vendosen jashtë bllokut të tekstit (ky është standardi) dhe brenda - shënuesit janë pjesë e bllokut të tekstit dhe shfaqen në artikullin e listës (shembulli 5).
Shembulli 5. Ndryshimi i pozicionit të shënuesve
Listat - Ju lutemi kontrolloni pajisjet e përfshira me kompletin 3BM përpara se të filloni punën.
- Në mungesë të një ose më shumë pajisjeve periferike, duhet të kontaktoni menjëherë personelin teknik të QV.
- Pas inspektimit vizual të zonës suaj të punës, mund të ndizni me kujdes fuqinë në 3BM.
Rezultati i këtij shembulli është paraqitur në Fig. 6.
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ë bëni një listë të numëruar, do të zotëroni etiketat që do t'ju ndihmojnë ta bëni një listë të thjeshtë me pika 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ë tutorial të shkurtër mbi HTML-në bazë. Përpara se të lexoni këtë mësim, unë rekomandoj të kaloni dy të mëparshmet:
Artikulli sapo ka filluar dhe ju mund të vini re tashmë përdorimin e një liste standarde me pika. Në faqen time të internetit, duket mjaft e thjeshtë: në të majtë ka një hyrje të vogël me një vijë dhe një shënues katror. Më tej në artikull, ne do të hedhim një vështrim më të afërt se çfarë janë shënuesit, 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ë caktuar.
1. Listat me plumba në HTML
Ky lloj listash përdoret për të numëruar një grup elementësh të ngjashëm në kuptim në tekst. Ky mund të jetë një listë e lidhjeve që lidhen me të njëjtën temë, një shpjegim i detajuar për pjesë të veçanta të tekstit. Por le të shohim se si duken listat me pika në kod:
Dhe kjo është se si duket në shfletues:
Oriz. 1.1. Pamja standarde e listës së parregulluar me plumba HTML në shfletues1.1 Pika standarde për listat me pika
Në imazhin e mësipërm (Fig 1.1.), Ju mund të shihni rrathët në fillim të çdo artikulli të menysë. Ky është shënuesi. Si parazgjedhje, është një rreth i mbushur në shfletues. Ekzistojnë disa lloje shënuesish në HTML: rrethi i mbushur, rrethi bosh dhe katrori. Ata nuk kërkojnë CSS ose imazhe të palëve të treta:
1.2 Listoni shënuesin si një rreth bosh
Ju i dini vlerat e atributeve, por tani le të shohim se si të krijojmë një listë me pika HTML në kod. Nga tabela e mësipërme, ne kemi zgjedhur vlerën e dytë "rreth" për atributin tip dhe e kemi caktuar atë në listën tonë me pika:
<html> <kokë> <titull> Një shembull i një liste me pika me një shënues rrethi bosh</ titulli> </ kokë> <trup> <p> Yjet:</ p> <ul type = "rreth"> <li> Sirius</ li> <li> Arkturi</ li> <li> Polluks</ li> <li> Betelgeuse</ li> <li> Dielli</ li> </ ul> </ trupi> </ html> Le të shohim se si do të duket ky kod në shfletues:
Oriz. 1.2. Pamja e pikave për një listë në formën e një rrethi në shfletues1.3 Listoni shënuesin në formën e një katrori
Le të shohim gjithashtu shembullin e fundit me një pikë katrore për listën HTML:
Vini re shënuesin, ai është bërë katror:
Oriz. 1.3. Shënues për një kuti liste si katror në një shfletuesShënim i rëndësishëm: kjo nuk përdoret më për stilimin e listave me pika. Ekziston një ndarje e qartë midis CSS (lexoni se çfarë është CSS) dhe HTML. HTML është për shënim dhe CSS është për pamje të bukur.
Kodi që përmban këtë atribut, kur specifikon llojin e dokumentit aktual si HTML5 (""), do të japë një gabim gjatë vërtetimit. Nëse nuk keni dëgjuar se çfarë është vërtetimi, atëherë duhet të shkoni këtu -.
Gabimi do të jetë si më poshtë:
Oriz. 1.4. Gabim në verifikuesin kur përdorni atributin "lloj" të listësNe kuptuam listat me pika. Tani le të kalojmë te listat e numëruara dhe më pas do të shikojmë listat e ndërthurura dhe disa shembuj të gatshëm që përdoren më shpesh në sajte reale.
2. Listat e numëruara në HTML
Ndryshe nga lloji i mëparshëm i listave, listat e numëruara kanë një veçori të rëndësishme: ato shtojnë automatikisht numërimin. Kjo është e dobishme kur ju duhet të numëroni një listë të madhe. Do të duhet një kohë shumë e gjatë me dorë, dhe ju ende mund të humbni. Një listë e numëruar specifikohet duke përdorur një etiketë. Si duket në praktikë:
Një 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</ titulli> </ kokë> <trup> <p> Një deri në pesë:</ p> <ol> <li> Së pari</ li> <li> Së dyti</ li> <li> Së treti</ li> <li> Së katërti</ li> <li> E pesta</ li> </ ol> </ trupi> </ html> Kështu duket një listë e numëruar me cilësimet e paracaktuara në shfletues:
Oriz. 2.1. Lista e numëruar në një shfletues me cilësime standardeAshtu si paraardhësi i tij (lista me pika), ajo ka stilet e veta për shfaqjen e numrave. Numërimi i thjeshtë nuk është lloji i vetëm i pikave për një listë të numëruar në HTML.
2.1 Pikë standarde për një listë të numëruar
Këtu kemi një zgjedhje jo nga tre lloje shënuesish, por nga pesë:
Emri i shënuesit Vlera e atributit "lloj". Listoni shembull Shenja numrash arabë 1 - Badminton
- Bejsbolli
Shënues në formën e shkronjave të vogla latine a - Chomolungma
- Chogori
- Kanchenjunga
Shënues në formën e shkronjave të mëdha latine A - Samiti bie
- Rrugicë zemërimi
- Insano
Shenjat e numrave romakë të vegjël i - deti i Filipineve
- Deti Arabik
- Deti koral
Numrat romakë të mëdhenj Unë - E kuqe
- E gjelbër
- Blu
2.2 Numërimi i personalizuar 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 shifër. Për ta bërë këtë, duhet të vendosni atributin shtesë "fillimi". Ky numërim funksionon për të gjitha llojet e pikave 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 rastësishëm për një listë të numëruar</ titulli> </ kokë> <trup> <p> Ne fillojmë të numërojmë në 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> Kështu do të shfaqet në një faqe të drejtpërdrejtë:
Oriz. 2.2. Numërimi nga një numër arbitrar në një listë të numëruarNë 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, u bë e qartë se si t'i përdorni këto atribute në projektet tuaja.
Tani për tani, le të kalojmë te listat e mbivendosura HTML.
3. Si të krijoni një listë me shumë nivele (të mbivendosur) në HTML
Listat me shumë nivele përdoren në sajt për ndërtimin e menysë. Kjo meny më së shpeshti duket si një drop-down ose poshtë (mësimi në), ose drop-down majtas ose djathtas. Meny të tilla ju lejojnë të ruani artikuj 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 ndërthurur me pika HTML</ titulli> </ 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 një listë me shumë nivele në një shfletues:
Oriz. 3.1. Një shembull i një liste me shumë nivele në HTMLNe bëmë një listë me shumë nivele duke përdorur një plumb (etiketë
- ). Lista e niveleve me modelet Citroen erdhi me shënues të tjerë. Lista kryesore me pika të mbushura dhe lista e nivelit të dytë me rrathë bosh. Por, mbani mend, me atributin "lloj" ne mund të anashkalojmë shënuesit (është më mirë t'i vendosni ato).
- Linja e parë
- I dyti
- Elementi i fundit
- - rrethi i mbushur (i parazgjedhur);
- - rrethi i hapur;
- - katror
- Një shënues në formën e një disku të mbushur
- Shënues në formën e një disku të pa lyer
- Sheshi
- Linja e parë
- Pika e dytë
- Linja e tretë
- - numërimi do të kryhet me numra të zakonshëm arabë (i njëjti opsion do të përdoret si parazgjedhje, në mungesë të atributit "Type");
- - shkronjat e mëdha si numërim;
- - shkronja të vogla;
- - numra romakë të mëdhenj;
- - numra romakë të vegjël;
- me numërim me numra romakë të mëdhenj
- Numërimi me shkronja të vogla latine
- Numra të vegjël romakë
- Elementi i parë, numri i të cilit është specifikuar në etiketën OL nga atributi start = "23".
- Artikulli tjetër, me një numër një më të lartë
- Edhe një më shumë
- Artikulli i parë me numër një
- Ky element do të marrë numrin e specifikuar në atributin vlerë = "32".
- Artikull me një numër të madh
- Pika e parë
- Së dyti
- E fundit
- Termi i parë
- Përshkrim
- Termi i dytë
- Përshkrimi i tij
- Paragrafi i parë i numrit kryesor
- Pika e dytë
- Elementi i parë i plumbit të mbivendosur
- Së dyti
- Paragrafi i tretë dhe i fundit i etiketuar
- Artikulli i tretë i numëruar
Por ne mund të kombinojmë listat shumënivelëshe të numëruara dhe të shënuara si kjo:
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, të shënuara dhe të numëruara në HTML</ titulli> </ 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 e dyfishtë</ li> </ ul> </ li> </ ol> </ li> </ ul> </ trupi> </ html> Në shembullin e mësipërm, kemi folezim të dyfishtë (2 nivele). Së pari, vendosim një listë me dy klasa tulipanësh, e kemi të numëruar. Më pas, një listë me pika futet në secilin prej artikujve në listën e numëruar.
Ne shikojmë pamjen e tij në shfletues:
Oriz. 3.2. Një shembull i një liste të numëruar në shumë nivele në një listë me pika në një shfletues4. Burime të dobishme për listat HTML
Ai përmban informacion që kërkon një kuptim të vetive të CSS. Për ta bërë këtë, unë rekomandoj që të studioni mësimet e mëposhtme:. Të gjithë shembujt do të jenë menjëherë me kodin burimor dhe do të ndahen në skedat HTML (struktura), CSS (stilet) dhe Rezultati (rezultat).
4.1 Si të bëni një listë HTML në një varg
Mund t'ju duhet ta bëni listën HTML në një varg kur krijoni një menu horizontale. Është shumë e thjeshtë për ta bërë atë:
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ë bëni një listë në qendër HTML
Një artikull i listës është një artikull bllok, kështu që duhet të përqendrohet duke përdorur mbushjen. Por ka një pikë të 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ë imazh i stilit të listës së pronave CSS. 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 kjo:
4.5 Lista me plumba HTML Shënuesin tuaj
Në këtë rast, është e nevojshme të lidhni paraprakisht ikonat e shkronjave (për shembull, FontAwesome). Atëherë mund të krijoni çdo ikonë në vend të shënuesit standard:
4.6 Si të bëni një listë në HTML me kolona të shumta
Për të krijuar një listë me shumë kolona, ne do të përdorim veçorinë e numërimit të kolonave CSS (kjo veti 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ë për listën në mënyrë që të shihni ndarjen në kolona të shumta:
5. Praktikë e punës me lista
Në videon më poshtë, mund të shihni të gjithë punën me listat HTML në praktikë:
Përshëndetje të dashur lexues të faqes së blogut. Sot, brenda këtij titulli, dua të flas për një shumëllojshmëri të listave Html që mund të krijohen bazuar në etiketat e krijuara posaçërisht UL, OL, LI dhe DL. Me ndihmën e çiftit UL dhe LI krijohen lista me pika, me ndihmën e OL dhe LI - të numëruara dhe me ndihmën e elementeve DL, DT dhe DD krijohen të ashtuquajturat listime të definicioneve. Do të shohim gjithashtu shkurtimisht parimet e krijimit të strukturave të mbivendosura.
Dua t'ju kujtoj se ne kemi arritur tashmë, kemi arritur të flasim për bazat e modernes, si dhe paraqitjen e tavolinës (). Për më tepër, ne prekëm bazat, mirë, mësuam.
Listat me pika bazuar në etiketat UL dhe LI
Etiketa UL përdoret për të krijuar lista me pika, dhe OL përdoret për të krijuar lista të numëruara. Këto etiketa janë çiftuar dhe bllokuar, ashtu si elementi LI.
Artikujt e veçantë të listës ndodhen midis etiketave hapëse dhe mbyllëse, të cilat nga ana tjetër janë të mbyllura në një element LI hapës dhe mbyllës. Në krye dhe në fund të listave Html, shfletuesi shton dhëmbëzimin me një rresht, të ngjashëm me dhëmbëzimin e krijuar nga një etiketë paragrafi.
Le të shohim, për shembull, një variant me plumba që mund të duket kështu:
Brenda etiketave UL hapëse dhe mbyllëse, mund të jenë vetëm elementët LI, dhe tashmë brenda vetë këtyre elementeve (artikujve), mund të futni çdo përmbajtje (tekst, foto, tituj, paragrafë, lidhje dhe madje edhe lista të tjera).
ato. UL shërben vetëm për të organizuar një listë me pika (të pa renditur) dhe gjithçka që do të shihni në një faqe ueb brenda saj zbatohet duke përdorur përmbajtjen e elementeve LI.
Për UL, mund të ndryshoni llojin e shënuesit duke shkruar vlera të ndryshme për atributin "Type" në të. Nëse "Type" (kontrolli i paraqitjes së shënuesve) nuk është specifikuar për elementin UL, atëherë do të shfaqet lloji i paracaktuar i shënuesit (disku - një rreth i mbushur me ngjyrën e tekstit):
Në shembujt e mësipërm, ne kemi shkruar atributin "Type" në elementin UL, duke aplikuar këtë lloj shënuesish për të gjithë artikujt. Por atributi "Type" mund të caktohet për çdo etiketë LI individuale duke vendosur llojin e vet të shënuesit për këtë artikull.
Një shembull i një liste me pika me lloje të ndryshme pikash për secilin artikull:
Listat e numëruara në Html bazuar në etiketën OL
Për të krijuar një listë të numëruar, përdoren etiketat OL, brenda të cilave, përsëri, do të vendosen elementët LI. OL dhe LI, siç e përmenda tashmë, janë bllok (d.m.th., ata tentojnë të zënë të gjithë hapësirën e disponueshme për ta në gjerësi) dhe brenda OL nuk do të jetë e mundur të vendoset asgjë tjetër përveç elementeve LI.
Rezulton se OL dhe UL janë etiketa shërbimi që nevojiten vetëm për t'i treguar shfletuesit se çfarë lloj liste po gjenerojmë (të shënuara ose të numëruara). Në rastin e një të numëruar, në të majtë të secilit artikull nuk do të shohim një shënues, por një numër dhe një pikë pas tij:
Siç e përmenda më lart, elementët UL, OL dhe LI kanë aftësinë të përdorin atributin TYPE. Kjo ju lejon të personalizoni llojin e pikës ose të specifikoni se cilët numra ose shkronja do të jenë artikuj të numëruar në listë. Për një listë të numëruar, parametrat e këtij atributi mund të marrin vlerat e mëposhtme:
Një shembull i një liste të numëruar me lloje të ndryshme numërimi për secilin artikull:
Kur krijoni lista të numëruara, është gjithashtu e mundur të filloni numërimin jo nga një, por nga numri i specifikuar në atributin START. Për shembull:
Për OL, mund të filloni gjithashtu një numërim të ri nga çdo vlerë, duke filluar nga çdo artikull, duke shkruar atributin VALUE me numrin e kërkuar në LI-në e hapjes së këtij artikulli. Për shembull:
Listat e stilimit në CSS (Fletët e stileve)
Por, si rregull, tani pamja e shënuesve vendoset jo përmes atributit TYPE, por për të cilin shkruhen vetitë përkatëse.
Këtu do të jap vetëm një shembull të pikave të ndryshme për listat e panumëruara, pamja e të cilave vendoset përmes një skedari të veçantë me fletë stili kaskadë.
Por ne do të flasim për në artikujt vijues. Kështu është vendosur pamja e shënuesve UL në këtë blog. Fotografitë përdoren si shënues: për artikujt e zakonshëm të një liste të panumëruar -, për artikujt e mbivendosur të një liste të panumëruar -.
Listat speciale dhe të mbivendosura në kodin Html
Lloji i tretë dhe i fundit quhet "listat e definicionit" dhe ato specifikohen duke përdorur tre etiketa - DL, DT dhe DD. DL i tregon shfletuesit se do të vijojë një listë përkufizimesh.
Zakonisht ky lloj përdoret (mirë, ose supozohej se do të përdoret) për shkrimin e hyrjeve të fjalorit, të përbërë nga terma (të mbyllur në etiketat DT) dhe përshkrimet e tyre (të mbyllura në etiketat DD).
Nëse shikoni shembullin e mësipërm, do të vini re se elementi DD (përshkrimi i termit) është zhvendosur (me 40 piksel) në raport me elementin DT (vetë termi).
Në përgjithësi, DL, DT dhe DD janë etiketa blloku, për më tepër, vetëm përmbajtja me etiketa inline mund të futet brenda një elementi DT (rezulton se brenda një DT nuk do të jetë e mundur të përdoren titujt e bllokut dhe elementët e paragrafit). Dhe brenda etiketave DD, mund të futni çdo element, si në linjë ashtu edhe në bllok.
Lista e mbivendosur në Html është krijuar sipas analogjisë me një të thjeshtë, por brenda listës kryesore, disa nga artikujt janë përsëri të mbyllur në etiketat hapëse dhe mbyllëse UL ose OL.
Ju lutemi vini re se LI-ja e mbylljes së artikullit në të cilin do të krijohet artikulli i vendosur vendoset vetëm pas të gjithë kodit të listës së mbivendosur (kjo është shumë e rëndësishme për shfaqjen e saktë të tij në faqen e internetit). Lista e mbivendosur mund të duket diçka si kjo:
Paç fat! Shihemi së shpejti në faqet e faqes së blogut
mund të shikoni më shumë video duke shkuar te
");">
Ju mund të jeni të interesuar
Si të futni një lidhje dhe një fotografi (foto) në etiketat HTML - IMG dhe A 
Format HTML për sitin - etiketat Form, Input dhe Select, Option, Textarea, Label dhe të tjera për krijimin e elementeve të formave të internetit Zgjidh, Option, Textarea, Label, Fieldset, Legend - Etiketat Html të formës me zbritje dhe të kutisë së tekstit 
Si vendosen ngjyrat në kodin Html dhe CSS, përzgjedhja e hijeve RGB në tabela, Yandex dhe programe të tjera 
Embed and Object - Etiketat HTML për shfaqjen e përmbajtjes së medias (video, flash, audio) në faqet e internetit 
Etiketat dhe atributet e titujve H1-H6, vija horizontale Hr, thyerja e rreshtit Br dhe paragrafi P sipas standardit Html 4.01 
Tabelat në Html - Etiketat Table, Tr dhe Td, si dhe Colspan, Cellpadding, Cellspacing dhe Rowspan për t'i krijuar ato
Figura 7. Puna e shembullit. Për më tepër, në punën tonë nuk e dimë gjithmonë se cili element do të ndjekë atë që përdor float. Idealja do të ishte mbyllja e 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:
Listoni horizontalisht Tani kemi 100% kod pune.
Figura 8. Shembull i ekzekutimit. Kjo teknikë me veçorinë float zakonisht përdoret kur kodohen faqet për të rreshtuar kolonat që krijohen nga etiketat
... Në këtë mënyrë, marrim ndërtimin normal të kolonave me shtrirjen e kërkuar të lartësisë. Kur krijojmë një menu, atëherë, 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-blloku) është mjaft i arsyeshëm në këto raste.Por për plotësinë e zbulimit të temës, ne jemi njohur me të gjitha opsionet e mundshme këtu. 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 me pika ju lejojnë të ndani tekstin e madh në blloqe të veçanta, secila prej të cilave fillon me një pikë - 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:
Figura 1 tregon rezultatin e një shembulli që ilustron tiparet e mësipërme të një liste me pika.
Oriz. 1. Pamje e listës me pika
Lloji i shënuesit
Shënuesit mund të marrin një nga tre llojet: rrethi i mbushur (i parazgjedhur), rrethi i hapur dhe katrori. Për të zgjedhur llojin e shënuesit, përdorni veçorinë list-style-type ose universal list-style (shembulli 1). Vlerat e mëposhtme zbatohen:
Shembull 1. Ndryshimi i pamjes së një shënuesi
Listat Shembulli tregon se si të krijoni një listë me pika duke përdorur një katror të vogël të fortë si ikonën 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 të veçanta që mund të veprojnë me sukses si një ikonë shënuesi. "Vidhosni" ato drejtpërdrejt në
- në vendin ku takohet
Në të njëjtën kohë, në shikim të parë, gjithçka funksionon. Por le të shkëmbejmë listat tona. Le të vendosim listën me menunë e klasës-1 në kod përpara listës me menunë e klasës-2 (tani është më poshtë).
Kjo është ajo që marrim si rezultat:
Figura 6. Shembull i operacionit. Artikujt e menysë së poshtme qarkullojnë gjithashtu në krye të menysë, sepse efekti i vetive float nuk është anuluar dhe zbatohet për të gjithë artikujt pasues.
Si të zgjidhet ky problem?
Për ta bërë këtë, ju duhet të përdorni veçorinë clear, ajo anulon rrjedhën e elementit rreth një elementi tjetër, nëse ai ka të vendosur veçoritë float.
Këtu është një shembull i modifikuar duke përdorur pronën e qartë:
Listoni horizontalisht Mund të shihet se lista e poshtme nuk ngjitet më tek ajo e sipërme, elementët nuk kalojnë mbi njëri-tjetrin. Por në listën e parë etiketat
- është gjithashtu një element blloku.
