listë të caktuar. listë me pika

30.03.2019 Hekuri

listë me pika përcaktohet duke shtuar një shënues të vogël, zakonisht një rreth të mbushur, përpara çdo artikulli të listës. Vetë lista është formuar duke përdorur një enë

siç tregohet më poshtë.
- Pika e parë
- Paragrafi i dytë
- Paragrafi i tretë
Lista duhet të përmbajë një etiketë mbyllëse.

, përndryshe do të ndodhë një gabim. Etiketa mbyllëse megjithëse nuk kërkohet, ju rekomandojmë që ta shtoni gjithmonë për të ndarë qartë elementët e listës.

Shembulli 11-1 është kodi HTML për shtimin e një liste me pika në një faqe interneti.

Shembulli 11.1. Krijo një listë me pika

listë me pika

Cheburashka
Krokodili Gena
Shapoklyak
Miu Larisa

Rezultati ky shembull treguar në fig. 11.1.

Oriz. 11.1. Pamja e listës me pika

Vini re mbushjen në krye, në fund dhe në të majtë të listës. Dhimbje të tilla shtohen automatikisht.

Shënuesit mund të marrin një nga tre format: rrethi (i parazgjedhur), rrethi dhe katrori. Atributi tip i etiketës përdoret për të zgjedhur stilin e shënuesit.

Vlerat e vlefshme

Lloji i listës	Kodi HTML	Shembull
Listë me pika në formë rrethi		E para Së dyti Së treti
Listë me pika në formë rrethi		E para Së dyti Së treti
Lista me pika katrore		E para Së dyti Së treti

Shfaqja e shënuesve mund të ndryshojë pak në shfletues të ndryshëm, si dhe kur ndryshoni fontin dhe madhësinë e tekstit.

Krijimi i një liste me shënues katror është paraqitur në Shembullin 11.2.

Shembulli 11.2. Lloji i shënuesve

listë me pika

Ndryshimi i Besimeve

ndryshimi i besimit fetar (për të zgjedhur nga: Budizmi, Konfucianizmi, Hinduizmi). Ofertë speciale- Judaizmi dhe Islami së bashku;
një ndryshim në besimin në pagabueshmërinë e palës së dashur;
besimi se alienët ekzistojnë;
preferenca për një sistem politik, si më i miri i llojit të tij (për të zgjedhur nga: feudalizmi, socializmi, komunizmi, kapitalizmi).

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

Listat përdoren në mënyrë aktive për numërimi automatik blloqe të përmbajtjes. Megjithatë, kur përdorni listat e ndërlidhura, nuk mund të merrni numërimin e nën-artikujve si 1.1, 1.2, 1.3, pasi secila listë do të jetë e pavarur. Por ajo që është e pamundur në STML mund t'u caktohet stileve.

Së pari, le të shohim se si të krijojmë lista të mbivendosura në përgjithësi. Etiketa vepron si kontejneri kryesor

. Lista e mbivendosur gjithashtu fillon me

, kështu vërehet korrektësia e sintaksës (shembulli 1).

Shembull 1. Lista e mbivendosur normale

listë e mbivendosur

Paragrafi 1
1. Nënklauzola 1.1
2. Nënklauzola 1.2
3. Nënklauzola 1.3

Pika 2
1. Nënklauzola 2.1
2. Nënklauzola 2.2

Rezultati i këtij shembulli është paraqitur në Fig. 1. Ju lutemi vini re se numërimi i listave të mbivendosura fillon çdo herë përsëri.

Oriz. 1. Pamja e listës së ndërlidhur

Tani le të heqim numërimin e integruar të listave dhe ta krijojmë atë sipas një të reje, por në formën që na nevojitet. Kjo do të kërkojë tre atribute stili: kundër-rivendosje, kundër-rritje dhe përmbajtje.

kundër-rivendosje - vendos disa ndryshore që do të ruajnë vlerën e numëruesit;

kundër-rritje - rrit ose ul vlerën e numëruesit me numrin e specifikuar;

përmbajtje - shfaq vlerën e numëruesit kur përdoret argumenti counter(variabla) . Punon në lidhje me pseudo-elementet pas ose para.

Le ta quajmë variablin numërues list1 për listën e nivelit të parë dhe list2 për nivelin e dytë. Pastaj inicimi i numëruesve për listat do të jetë si më poshtë.

OL (kundër-rivendosja: list1;) /* Lista e nivelit të parë */
OL OL (kundër-rivendosja: list2;) /* Lista e nivelit të dytë */

AT këtë rast Zgjedhësit e përmbajtjes ndihmojnë në ndarjen e listës së mbivendosur nga lista e jashtme. Konstruksioni OL OL do të thotë të aplikoni stilin vetëm në etiketë

Vlera e numëruesit rritet nëpërmjet përzgjedhësit OL LI:para, të cilit i shtohen atributet kundër rritjes dhe stilit të përmbajtjes. Atributi counter-increment me listën e vlerave1 e rrit këtë numërues me një dhe përmbajtja: counter(list1) ". " shfaq vlerën e numëruesit përpara artikullit të listës. Këto atribute funksionojnë në çifte, kështu që ato duhet të aktivizohen në të njëjtën kohë.

OL LI: më parë ( /* Lista e nivelit të parë */
kundër-rritje: lista1;
/* Shfaq vlerën si 1., 2.*/
}
OL OL LI: më parë ( /* Lista e nivelit të dytë */
kundër-rritje: list2; /* Numëruesi i rritjes */
}

Për një listë të ndërthurur, ne përsëri përdorim përzgjedhësit e përmbajtjes (OL OL ) dhe njëkohësisht përdorim daljen e listës së numëruesit1 dhe list2, në këtë rast do të marrim numërimin e llojit që na nevojitet.

Kodi përfundimtar tregohet në shembullin 2.

Shembulli 2: Listat e mbivendosura me numërim automatik

listë e mbivendosur

Paragraf
1. Nënparagrafi
2. Nënparagrafi
3. Nënparagrafi

Paragraf
1. Nënparagrafi
2. Nënparagrafi

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

Oriz. 2. Pamje e numërimit automatik të listës në shfletuesin Opera

Koment

Shembulli i dhënë nuk funksionon në shfletues Internet Explorer deri dhe duke përfshirë versionin 7 sepse nuk mbështet asnjë nga veçoritë e stilit të mësipërm.

Meqenëse Internet Explorer nuk mbështet shumë atribute të stilit interesant, numërimi i zakonshëm në lista duhet të lihet i paprekur posaçërisht për të. Për ta bërë këtë, hiqni list-style-type: asnjë . Por kjo do të ndikojë gjithashtu në shfletuesit e tjerë në të cilët shembulli funksionon si duhet, kështu që ju duhet të përdorni një hak - kjo është ajo që nënkuptohet me teknikën kur shfletues të ndryshëm dhënë një kod stili të ndryshëm. Për shembull, mund të përdorni etiketën !important. Shtimi i !important në vlerën e një atributi të stilit rrit rëndësinë e tij. Nëse ripërcaktoni vlerën e të njëjtit atribut pa !important , ai do të injorohet nga shfletuesit. Por jo në internet Versioni i Explorer 6 dhe më poshtë.

LI(
list-style-type: asnjë !i rëndësishëm; /* Hiq numërimin në shfletuesit Opera, Safari, Firefox */
list-style-type: dhjetore; /* Lini numërimin në IE6 dhe më poshtë */
}

Duke i zëvendësuar këto kode me vargun me përzgjedhësin LI në shembullin 2, marrim një listë të ndërthurur që funksionon saktë në të gjithë shfletuesit.

Listat e numëruara janë një koleksion artikujsh me të numrat serialë. Lloji dhe lloji i numërimit varet nga atributet e etiketës

siç tregohet më poshtë.

Pika e parë
Paragrafi i dytë
Paragrafi i tretë

Nëse nuk specifikoni ndonjë atribut shtesë dhe thjesht shkruani një etiketë

Shembulli 11.3. Krijo një listë të numëruar

listë me numër

Duke punuar me kohën

duke krijuar përpikmëri (nuk do të vonoheni kurrë për asgjë);
kurë për përpikmërinë (nuk do të nxitoni askund);
ndryshim në perceptimin e kohës dhe orës.

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

Oriz. 11.3. Pamja e listës me numër

Vini re se lista e numëruar shton gjithashtu dhëmbëzimin automatik në krye, në fund dhe në të majtë të tekstit.

Vlerat e mëposhtme mund të veprojnë si elemente numerike:

Numrat arabë (1, 2, 3, ...);
shkronjat e mëdha latine (A, B, C, ...);
shkronjat e vogla latine (a, b, c, ...);
numra romakë të mëdhenj (I, II, III, ...);
numra romakë të vegjël (i, ii, iii, ...).

Atributi tip i etiketës përdoret për të treguar llojin e listës së numëruar.

vlerat e mundshme

Lloji i listës	Kodi HTML	Shembull
Numrat arabë		1. Cheburashka 2. Krokodili Gena 3. Shapoklyak
Shkronjat e mëdha Alfabeti latin		A. Cheburashka B. Krokodili Gena C. Shapoklyak
Shkronjat e vogla të alfabetit latin		a. Cheburashka b. Krokodili Gena c. Shapoklyak
Numrat romakë me shkronja të mëdha		I. Cheburashka II. Krokodili Gena III. Shapoklyak
Numrat romakë në shkronja të vogla		i. Cheburashka ii. Krokodili Gena iii. Shapoklyak

Për të filluar listën me një vlerë specifike, përdorni atributin start të etiketës

Shembulli 11.4. Numërimi i listës

Numrat romakë

Mbreti Magnum XLIV
Mbreti Siegfried XVI
Mbreti Sigismund XXI
Mbreti Husbrandt I

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

Oriz. 11.4. Lista e numëruar me numra romakë

AT Gjuha HTML Ekzistojnë dy lloje të listave: të numëruara dhe të panumëruara. Krijimi i tyre është pothuajse i njëjtë. Edhe etiketat ndryshojnë nga një karakter. Ju gjithashtu mund të krijoni të cilat mund të përfshijnë si me numra ashtu edhe me pika.

Këto lista mund të transformohen në çdo mënyrë që ju pëlqen. E gjitha varet nga imagjinata juaj. Së pari ne do të shqyrtojmë listat standarde, njëjtë si në Redaktori i fjalës, dhe më pas ne do t'i përmirësojmë dhe dizajnojmë ato përtej njohjes.

Lista e numëruar HTML

Një numër i rregullt mund të krijohet duke përdorur etiketat e mëposhtme:

Artikulli i parë në listë

Artikulli i dytë në listë

Pika e tretë në listë

Listat e thjeshta duken kështu

Sipas standardeve, çdo artikull i listës duhet të jetë brenda një etikete li hapëse dhe mbyllëse. Por nëse nuk vendosni një etiketë mbyllëse, rezultati do të jetë saktësisht i njëjtë. Drejtuesi është shumë i zgjuar. Gjatë transformimit të listës, ai analizon etiketat hapëse. Nëse ai sheh një të re

, pastaj automatikisht vendos para tij

Kështu, listat mund të bëhen siç tregohet më poshtë.

Por nga këndvështrimi i profesionistëve, kjo është e pasaktë.

Listat e pa renditura (ose me pika) krijohen saktësisht në të njëjtën mënyrë, por në vend të etiketës ol, shkruhet ul.

Nuk ka numra apo shkronja në të - vetëm simbole të ndryshme, të cilat quhen shënues.

Lista e numëruar në shumë nivele HTML

Shumë përdorues janë të interesuar për këtë mundësi. Prandaj, duhet të theksohet se çdo listë HTML e numëruar mund të bëhet me shumë nivele. Nivele shtesë mund të jetë i njëjtë ose i shënuar.

Për të krijuar listën e treguar në shembullin e mësipërm, duhet të shkruani sa vijon.

Vini re se në këtë kod, ndryshe nga shembujt e parë, atributi tip është shtuar. Falë tij, ju mund të specifikoni llojin e renditjes si për listat me numra ashtu edhe për listat me pika.

Për të numëruar, ne tregojmë alfabetin ose llojin e numrave, dhe për raste të tjera - llojin e shënuesit.

Nëse përdoret etiketë speciale HTML, lista e numëruar mund të jetë çfarëdo që dëshironi.

Ju mund të specifikoni atributin tip me çdo vlerë nga tabela. Ose, në klasën e stilit css, specifikoni list-style-lloj me llojin e dëshiruar të renditjes.

Përkthimi i vlerave është mjaft i thjeshtë. Mjaft njohuri themelore të gjuhës angleze. Por edhe nëse nuk mund të përktheni fjalët "rreth", "katror", etj., Mund të kuptoni vizualisht se cili do të jetë rezultati kur specifikoni këto vlera në atributin tip.

Për listat e numëruara, përdorni opsionet e mëposhtme:

1 - numra arabë;
A - shkronja të mëdha;
a - shkronja të vogla latine;
I - numra romakë të mëdhenj;
i - numra romakë të vegjël.

Parazgjedhja është gjithmonë një listë me . Kjo do të thotë, nëse nuk specifikoni asgjë, kjo është e barabartë me type="1".

Përveç kësaj, listat e numëruara mund të fillojnë në çdo pozicion të dëshiruar. Si parazgjedhje, dalja është nga 1. Por nëse dëshironi, mund të filloni të paktën me njëqind. Për ta bërë këtë, duhet të specifikoni atributin e fillimit me çdo vlerë.

Përveç kësaj, mund të konkludohet se rend i kundërt. Për ta bërë këtë, ju duhet të shkruani të kundërt.

Dizajni i listës

Një listë HTML e numëruar mund të stilohet aq bukur saqë nuk mund ta merrni me mend menjëherë se çfarë është. lista e rregullt, jo një foto e bërë në Photoshop.

Këtu janë shembuj të listave të bukura.

Siç mund ta shihni nga shembulli, ju mund të ndryshoni pamjen numërimi dhe vetë elementët.

Ju mund të krijoni një listë të rregullt si kjo.

Në stilet css, duhet të specifikoni dizajnin për etiketat ol. Ju lutemi vini re se në këtë rast cilësimet do të aplikohen në të gjitha listat e të gjithë sajtit ku përdoret ky skedar stili.

Konsideroni së pari opsionin me një dizajn të listës së rrumbullakët. Kthehu te kodi i listës. Klasa e listës së rrumbullakosur është e specifikuar atje. Është me këtë klasë me të cilën duhet të ndërhyni për të bërë një bukuri të tillë. Ju mund ta emërtoni klasën si të dëshironi.

Tani merrni parasysh modelin katror.

Stilet janë shumë të ngjashme. Dallimi është se në rastin e parë, elementi rrumbullakoset duke përdorur aftësitë css.

Një projektues profesionist i paraqitjes duhet të parashikojë dhe të kuptojë se jo të gjithë përdoruesit e përdorin kompjuterë modernë. Jo të gjithë kanë të instaluar Windows 7, 8, 10. Ekziston një përqindje e përdoruesve që janë ende në Windows XP dhe përdorin versione më të vjetra Shfletuesi i internetit eksplorues.

Si rregull, pothuajse të gjitha përmirësimet moderne të dizajnit të elementeve nuk mbështeten prej tyre. Përdoruesit do t'i duket se dizajni i faqes nuk është punuar fare. Se gjithçka ka shkuar. Elementet përplasen me njëri-tjetrin. Për të shmangur këtë, duhet të llogaritni të gjitha opsionet.

Disa webmasterë mbyllin një sy ndaj tyre sepse pjesa e tyre është aktive treg modern po bëhet gjithnjë e më i vogël. Por për një profesionist çdo vizitor është i rëndësishëm, veçanërisht nëse është një faqe komerciale.

Bëni diçka të përshtatshme për të gjithë ose merrni parasysh të gjitha opsionet e shfletuesit.

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, etiketa master që do t'ju ndihmojnë të 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 zbatohen 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, duket mjaft e thjeshtë: në të majtë ka një hyrje të vogël me një vijë dhe një shënues katror. Më vonë 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ë veçantë.

1. Listat me plumba në HTML

Kjo lloj liste përdoret për të numëruar në tekst një grup elementësh të ngjashëm në vlerë. Mund të jetë një listë lidhjesh që lidhen me të njëjtën temë, shpjegim i detajuar për pjesë të veçanta teksti. Por le të shohim se si duken listat me pika në kod:

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

pamje standarde

1.1 Pikë standarde për një listë 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, është në shfletues si një rreth i mbushur. Ekzistojnë disa lloje shënuesish në HTML: një rreth i mbushur, një rreth bosh dhe një katror. Ata nuk kërkojnë ndonjë CSS ose përfshijnë 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ë të "rrethit". tip atribut dhe vendoseni në listën tonë me pika:

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

Le të shohim se si do të duket ky kod 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:

Shënim i rëndësishëm: kjo metodë nuk përdoret më për të stiluar 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 atribut i dhënë, kur specifikoni llojin dokument aktual si HTML5 (""), do të japë një gabim gjatë vërtetimit. Nëse nuk keni dëgjuar se çfarë është vërtetimi, atëherë jeni këtu - .

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

Ne kuptuam listat me pika. Tani le të kalojmë te listat e numëruara dhe më pas të shqyrtojmë listat e ndërthurura dhe disa shembuj të gatshëm, të cilat përdoren më shpesh në faqet e internetit 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 vendosin automatikisht numërimin. Kjo është e dobishme kur ju duhet të numëroni listë e madhe. Do të marrë shumë kohë me dorë, dhe prapë mund të humbisni. Lista 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> Nga një në pesë: <ol > <li > E para</li> <li > Së dyti</li> <li > Së treti</li> <li > Së katërti</li> <li > Së pesti</li> </ol> </trupi> </html>

Kështu duket një listë e numëruar. cilësimet e paracaktuara në shfletues:

Ashtu si paraardhësi i tij (lista me pika) ajo ka stilet e veta për shfaqjen e numrave. Numërimi normal nuk është lloji i vetëm i pikave në një listë të numëruar në HTML.

2.1 Pika 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
Shënues në formën e numrave arabë	1	Badminton Bejsbolli
Shënues në linjë Shkronjat latine	a	Chomolungma Chogori Kanchenjunga
Shënues në formën e shkronjave të mëdha latine	A	Summit Plummet Rruga e tantrumit Insano
Shenja me numra 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 një atribut shtesë "start". 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> Fillojmë të numërojmë nga dymbëdhjetë: <oltype="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ë shfaqej në një sajt të vërtetë:

numër arbitrar

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, u bë e qartë se si t'i përdorni këto atribute në projektet tuaja.

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ë sit në menutë e ndërtimit. 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 shembullin e modeleve të makinave, 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 ngulitur me pika 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:

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

Por ne mund të bashkohemi listat me shumë nivele me numër dhe të etiketuar 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, të shënuara dhe të shtresuara 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 fole të dyfishta (2 nivele). Së pari, futet një listë me dy klasa tulipanësh, e kemi të numëruar. Pastaj një listë me pika vendoset në secilin prej elementeve të listës së numëruar.

Le të shohim se si duket në shfletues:

4. Listimet e dobishme 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 ndahet në skedat HTML (struktura), CSS (stilet) dhe Result (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. Bërja e tij është shumë e thjeshtë:

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

Përgjegjës për këtë veti e tipit list-style në CSS (më shumë informacion):

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

Elementi i listës është 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

Vetëm vetia CSS e imazhit të stilit të listës është e mjaftueshme. Brenda url-së, specifikoni adresën e ikonës. Thjesht dua të vërej se është më mirë të zgjidhni menjëherë një imazh të vogël, sepse lartësia e vijës së listës varet nga kjo:

4.5 Shënues i personalizuar HTML i listës me pika

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

4.6 Si të krijoni një listë me shumë kolona në HTML

Për ta bërë listën në kolona të shumta ne 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 një lartësi për listën për të parë ndarjen në kolona të shumta:

5. Ushtroni me lista

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