Çfarë bën etiketa ul. Listat e numëruara në HTML

02.04.2019 Në kontakt me

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ë
- Pika e dytë
- Paragrafi i tretë
Lista duhet të përmbajë një etiketë mbyllëse.

, përndryshe do të ndodhë një gabim. Etiketa mbyllëse edhe pse 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		Së pari Së dyti E treta
Listë me pika në formë rrethi		Së pari Së dyti E treta
Lista me pika katrore		Së pari Së dyti E treta

Shënuesit mund të ndryshojnë pak në varësi të 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.

Përshëndetje, të dashur lexues të faqes së blogut. Sot, nën këtë titull, dua të flas për listat e ndryshme Html që mund të krijohen bazuar në etiketat UL, OL, LI dhe DL të krijuara posaçërisht për këtë. Me ndihmën e një çifti UL dhe LI krijohen lista me pika, me ndihmën e listave OL dhe LI - me numra dhe me ndihmën e elementeve DL, DT dhe DD krijohen të ashtuquajturat listime të definicioneve. Ne gjithashtu do të shqyrtojmë shkurtimisht parimet e krijimit të strukturave të mbivendosura.

Dua t'ju kujtoj se tashmë kemi arritur të flasim për bazat e paraqitjes moderne, si dhe tabelare (). 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 etiketa OL përdoret për të krijuar lista të numëruara. Këto etiketa janë të çiftuara dhe bllokojnë etiketat, ashtu si elementi LI.

Midis etiketave hapëse dhe mbyllëse janë artikuj të veçantë të listës, të cilët nga ana tjetër janë të mbyllur në elementin 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 atë të krijuar nga etiketa e paragrafit.

Le të shohim, për shembull, një version të etiketuar që mund të duket kështu:

Linja e parë
Së dyti
Elementi i fundit

Brenda etiketave UL hapëse dhe mbyllëse, mund të vendosen vetëm elementë LI, dhe tashmë brenda këtyre elementeve (paragrafëve) 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ë të etiketuar (jo të porositur) dhe gjithçka që do të shihni në faqe interneti brenda tij zbatohet duke përdorur përmbajtjen e elementeve LI.

Për UL, mund të ndryshoni llojin e shënuesit duke shkruar në të kuptime të ndryshme për atributin "Type". Nëse "Type" (menaxhimi i pamjes së shënuesve) për elementin UL nuk është specifikuar, atëherë do të shfaqet lloji i paracaktuar i shënuesit (disku është një rreth i mbushur me ngjyrën e tekstit):

Në shembujt e mësipërm, ne kemi shkruar atributin "Type" në elementin UL duke përdorur lloji i dhënë shënues për të gjithë artikujt. Por atributi "Type" mund të shkruhet gjithashtu 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 shënues për çdo artikull:

Shënues i diskut i mbushur
Shënues në formën e një disku pa hije
Sheshi

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ë në nivel blloku (d.m.th., ata priren të zënë të gjithë hapësirën e disponueshme për ta në gjerësi) dhe asgjë nuk mund të vendoset brenda OL 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 formojmë (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:

Linja e parë
Pika e dytë
Linja e tretë

Siç e përmenda më lart, elementët UL, OL dhe LI kanë aftësinë të përdorin atributin TYPE. Kjo ju lejon të vendosni llojin e shënuesit ose të specifikoni se me çfarë numrash ose shkronjash do të numërohen artikujt e listuar. Për një listë të renditur, parametrat e këtij atributi mund të marrin vlerat e mëposhtme:

shkronjat e mëdha

- numra romakë të vegjël;

Një shembull i një liste të numëruar me lloje të ndryshme numërimi për secilin artikull:

numërohen me numra romakë të mëdhenj
Numërimi me shkronja të vogla latine
Numërimi me numra romakë të vegjël

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:

Elementi i parë numri i të cilit është specifikuar në etiketën OL nga atributi start="23"
Artikulli tjetër, me një numër më shumë
Edhe nje tjeter

Për OL, ju gjithashtu mund të filloni 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:

Artikulli i parë numër një
Ky element do të marrë numrin e specifikuar në vlerën e atributit = "32"
Artikull me një numër të madh

Stilimi i paraqitjes së listave në CSS (fletë stili)

Por zakonisht tani pamjen shënuesit vendosen jo përmes atributit TYPE, por , për të cilin janë shkruar vetitë përkatëse.

Këtu do të jap vetëm një shembull të shënuesve të ndryshëm për listat e pa renditura, pamja e të cilave specifikohet përmes skedar të veçantë me fletë stili kaskadë.

Pika e parë
Së dyti
E fundit

Por ne do të flasim për këtë në artikujt e ardhshëm. Kështu është vendosur pamja e shënuesve për 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 vendosur të një liste të panumëruar — .

Listat speciale dhe të mbivendosura në kodin Html

Lloji i tretë dhe i fundit quhet "lista përkufizimi" dhe ato vendosen duke përdorur tre etiketa - DL, DT dhe DD. DL i tregon shfletuesit se do të vijojë një listë përkufizimesh.

Në mënyrë tipike, ky lloj përdoret (ose supozohej të përdorej) për të shkruar hyrje në fjalor që përbëhen nga terma (të përfshirë në etiketat DT) dhe përshkrimet e tyre (të përfshira në etiketat DD).

Termi i parë: Përshkrim
Termi i dytë: Përshkrimi i tij

Nëse shikoni shembullin e mësipërm, do të vini re se elementi DD (përshkrimi i termit) është zhvendosur (me 40 px) në lidhje me elementin DT (vetë termi).

Në përgjithësi, DL, DT dhe DD janë bllokojnë etiketat, për më tepër, brenda elementit DT, mund të futni vetëm përmbajtje me etiketat inline(Rezulton se elementët e bllokut të titujve dhe paragrafëve nuk mund të përdoren brenda DT). Dhe brenda etiketave DD, mund të futni çdo element, si në linjë ashtu edhe në bllok.

listë 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ë etiketën UL ose OL hapëse dhe mbyllëse.

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:

Paragrafi i parë i kryesorit numërohet
Pika e dytë
- Elementi i parë i etiketuar mbivendosur
- Së dyti
- Pika e tretë dhe e fundit e shënuar
Elementi i tretë i numëruar

Paç fat! Shihemi së shpejti në faqen e faqeve të blogut

Mund të shikoni më shumë video duke shkuar te

");">

Ju mund të jeni të interesuar

Si të ngjitni Lidhje HTML dhe një foto (foto) - etiketat 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ë formës së internetit Zgjidhni, Option, Textarea, Label, Fieldset, Legend - Etiketat Html të formularit të listës rënëse dhe fushë teksti
Si vendosen ngjyrat në kodin Html dhe CSS, përzgjedhja e nuancave RGB në tabela, rezultatet Yandex dhe programe të tjera
Embed dhe objekt Etiketat HTML për të shfaqur përmbajtjen e medias (video, flash, audio) në faqet e internetit
Etiketat dhe atributet e titullit H1-H6, vije 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

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 kryesore 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ë caktuar.

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:

Oriz. 1.1. Pamja standarde e një liste HTML të parregulluar me pika në një shfletues

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ë krijojmë 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: <ultype="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 shënuesit për listën në formën e një rrethi 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 shënuesit për listën në formën e një katrori në shfletues

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ë:

Oriz. 1.4. Gabim në verifikuesin kur përdorni atributin "lloj" të listës

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 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. Me dorë do t'ju duhet shumë kohë, dhe ju ende mund të devijoni. 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 > Së pari</li> <li > Së dyti</li> <li > E treta</li> <li > Së katërti</li> <li > E pesta</li> </ol> </trupi> </html>

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

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

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 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
Shënues në formën e numrave arabë	1	Badminton Bejsbolli
Shënues në linjë shkronja 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	Unë	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ë "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 > 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ë:

Oriz. 2.2. Numërimi nga numër arbitrar 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, 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:

Oriz. 3.1. Shembull i listës së shtresave në HTML

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 folezim të dyfishtë (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ë 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 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 rreshtit të 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 që të shihet e ndarë në kolona të shumta:

5. Ushtroni me lista

Në videon e mëposhtme mund të shihni të gjitha punimet nga Listat HTML në praktikë:

listat standarde

pamje standarde

Bazuar në bazat, tani do t'i hedhim një vështrim më të afërt elementëve të përdorur për të siguruar strukturën dhe kuptimin pjesë të ndryshme dizajni. Nëse dikush nuk e di, atëherë ul dhe li, kjo është shumë menyra me e mire se sa e thjeshtë teksti i tekstit sepse kur teksti përfundon, veçanërisht në celular, është i prerë në mënyrë të përkryer dhe nuk mbështillet rreth shënuesit.

Listat konsiderohen të jenë mënyrë e shkëlqyer prezantimi i informacionit në faqe sepse ato janë të lehta për t'u lexuar dhe duken mirë. Shumë njerëz duket se mendojnë se pikat e plumbave janë imazhe të vogla, por në fakt ato janë krijuar të gjitha përmes një fare html e thjeshtë Kodi. Mund të ngjitni tipe te ndryshme listoni njëri-tjetrin nëse dëshironi, thjesht mos harroni t'i mbyllni siç duhet. Ju mund të luani me tekstin që dëshironi në të gjitha këto komanda të listës.

Ju gjithashtu duhet të dini se listat fillimisht përmbajnë disa elementë:

1 . informacione të parregulluara.
2 . Informacioni i porositur.
3 . Përkufizimet.

Le të fillojmë instalimin:

1. Opsioni:

Artikulli i listës

Lista unike

Listimet origjinale

ZORNET.RU - Webmaster

Një listë tjetër

(Ksangelopan)
diferenca: 19px 0 0;
mbushje: 0;
list-style: asnjë;
kundër-rivendosje:li;
}
.ksangelopan li (
kufiri: 2px solid #3575ad;
sfond: #d7dee4;
pozicioni: i afërm;
margjina-fund: 17px;
mbushje: 15px 9px;
}
.ksangelopan li:hover(
z-indeksi: 1;
}
.ksangelopan li:para (
kufiri: 2px solid #2270b3;
pozicioni: absolut;
krye: -14px;
mbushje: 3px 9px;
madhësia e shkronjave: 11 px;
pesha e shkronjave: bold;
ngjyra: #246 eaf;
sfond: #f2f4f7;
kundër-rritje: li;
përmbajtja: counter(li);
-webkit-tranzicioni-kohëzgjatja: 0.4s;
kohëzgjatja e tranzicionit: 0.4 s;
}
.ksangelopan li:hover:para (
sfond: #2672b3;
ngjyra: #f7f9fb;
-webkit-transform: translate(-11px, 0);
-ms-transform: translate(-11px, 0);
-o-transformoj: translate(-11px, 0);
transformimi: translate (-11px, 0);
}
.ksangelopan li:pas (
përmbajtja: "";
pozicioni: absolut;
kohëzgjatja e tranzicionit: 0.3 s;
-webkit-transition-property: gjerësia;
tranzicioni-prona: gjerësia;
z-indeksi: -1;
sfond: #FFF;
lartësia: 100%;
majtas: 0;
krye: 0;
gjerësia: 0;
}
.ksangelopan li:hover:after (
gjerësia: 100%
}

2 Opsioni i dytë:

Artikulli i listës

Lista unike

Listimet origjinale

ZORNET.RU - Webmaster

Një listë tjetër

Beleduzlopamges (
margjina-fund: 8px;
mbushje: 0;
list-style: asnjë;
kundër-rivendosje:li;
}
.beleduzlopamges li (
pozicioni: i afërm;
kufiri: 2px solid #195588;
sfond: #eff3f7;
mbushje: 15px 19px 15px 27px;
diferenca: 12px 0 12px 40px;
-webkit-tranzicioni-kohëzgjatja: 0.3s;
kohëzgjatja e tranzicionit: 0.3 s;
}
.beleduzlopamges li:hover(
sfond: #FFF;
}
.beleduzlopamges li:para (
lartësia e vijës: 32 px;
pozicioni: absolut;
sipër: 4px;
majtas: -39px;
gjerësia: 39 px
text-align: qendër;
madhësia e shkronjave: 16 px;
pesha e shkronjave: bold;
ngjyra: #f9f5f5;
sfond: #275b88;
kundër-rritje: li;
përmbajtja: counter(li);
tranzicioni-kohëzgjatja: 0.2 s;
}
.beleduzlopamges li:hover:para (
gjerësia: 46 px;
}
.beleduzlopamges li:pas (
pozicioni: absolut;
majtas: 0;
sipër: 4px;
përmbajtja: "";
lartësia: 0;
gjerësia: 0;
kufiri: 16px transparent;
kufiri-majtas-ngjyra: #275b88;
-webkit-tranzicioni-kohëzgjatja: 0.2s;
tranzicioni-kohëzgjatja: 0.2 s;
}
.beleduzlopamges li:hover:after (
margjina-majtas: 6px;
}

3 Opsioni i tretë:

Skriptet për uCoz

Modele për uCoz

Dizajn i faqes në internet

Stilet për sitin

Stilimi në CSS

Nizualisanelag (
mbushje: 0;
list-style: asnjë;
kundër-rivendosje:li;
}
.nizualisanelag li(
pozicioni: i afërm;
mbushje: 9px 17px 17px 25px;
margjina-majtas: 39px;
tranzicioni-kohëzgjatja: 0.2 s;
kursori: treguesi;
pesha e shkronjave: bold;
ngjyra: #343638;
}
.nizualisanelag li:para (
kufiri: 3px transparent;
lartësia e vijës: 35 px;
pozicioni: absolut;
krye: 0;
majtas: -29 px;
gjerësia: 41 px;
text-align:center;
madhësia e shkronjave: 14 px;
pesha e shkronjave: bold;
ngjyra: #619dce;
kundër-rritje: li;
përmbajtja: counter(li);
kohëzgjatja e tranzicionit: 0.3 s;

box-sizing: kufi-kuti;
}
.nizualisanelag li:hover:para (
ngjyra: #337AB7;
}
.nizualisanelag li:pas (
pozicioni: absolut;
krye: 0;
majtas: -29px;
gjerësia: 41 px
lartësia: 41 px;
kufiri: 5px solid #468bd0;
rrezja kufitare: 50%
përmbajtja: "";
tejdukshmëria: 0.5
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: kufi-kuti;
}
.nizualisanelag li:hover:after (
animacion: 500ms ease-in-out 0s bounceIn;
errësirë: 1
}

@keyframes bounceIn(
0% {
errësirë: 0
transformimi: scale3d(.3, .3, .3);
}
20% {
transformimi: scale3d (1.3, 1.3, 1.3);
}
40% {
transformimi: scale3d (.9, .9, .9);
}
60% {
errësirë: 1
transformimi: scale3d (1.03, 1.03, 1.03);
}
80% {
transformimi: scale3d(.97, .97, .97);
}
te (
errësirë: 1
transformimi: scale3d (1, 1, 1);
}
}

animacion i bukur

4 Opsioni i katërt:

Elementi i parë për sitin

Elementi i dytë për sitin

Elementi i tretë për sitin

Elementi i katërt për sitin

Elementi i pestë për sitin

mbushje: 0;
list-style: asnjë;
}
.kudezamuden li(
mbushje: 6 px;
}
.kudezamuden li:para (
mbushje-djathtas: 11px;
pesha e shkronjave: bold;
ngjyra: #4979a0;
përmbajtja: "\2606";
kohëzgjatja e tranzicionit: 0.4 s;
}
.kudezamuden li:hover:para (
ngjyra: #235e90;
përmbajtja: "\2605";
}

versioni i mëparshëm

Në përgjithësi, kjo përzgjedhje e vogël listat, do t'i japë web masterit të bëjë një listë të bukur në portal, ku mund ta rregullojë më shumë, pasi ai vetë dëshiron ta shohë.

Nëse ju duhet të vendosni artikuj në një listë të numëruar në vend të një liste me pika, HTML-ja e renditur do të përdoret këtu. Kjo listë krijohet duke përdorur etiketën ol. Numërimi fillon me një dhe rritet me një për çdo element vijues të renditur të listës me një etiketë li.

Listat HTML përdoret për të grupuar pjesë të lidhura të informacionit. Ekzistojnë tre lloje të listave:

listë me pika —

shënuar me një shënues
listë me numër —
1. shënuar me një numër
  lista e përkufizimeve— — përbëhet nga çifte termash
  —
  përkufizim.
  Çdo listë është një kontejner që përmban elementë të listës ose çifte të përkufizimit të termave. Elementet e listës sillen si elementë blloku, të vendosur njëra poshtë tjetrës dhe duke zënë gjerësinë e plotë të bllokut të kontejnerit. Çdo artikull i listës ka një kuti shtesë në anën që nuk është pjesë e paraqitjes.
  
  Krijimi i listave HTML
  
  1. Lista me pika
  
  listë me pikaështë një listë e parregulluar (nga Lista angleze e pa renditur). Krijuar me etiketë e çiftuar
  . Një shënues i artikullit të listës është një etiketë, siç është një rreth i mbushur.
  Shfletuesit si parazgjedhje shtojnë formatimin e mëposhtëm në kutinë e listës:
  Çdo element i listës krijohet duke përdorur një etiketë çifti
2. (nga artikulli i listës angleze).
- Microsoft
- Google
- Apple
Oriz. 1. Lista me pika
2. Lista e numëruar

listë me numër krijuar duke përdorur etiketën e çiftit. Çdo artikull i listës krijohet gjithashtu me një element
. Shfletuesi numëron elementet sipas renditjes automatikisht dhe nëse një ose më shumë elementë të një liste të tillë fshihen, numrat e mbetur do të rillogariten automatikisht.
Blloku i listës ka gjithashtu stilet e paracaktuar të shfletuesit:
është i disponueshëm atributi i vlerës, i cili ju lejon të ndryshoni numrin e paracaktuar për artikullin e përzgjedhur të listës. Për shembull, nëse artikulli i parë në listë është caktuar në

, atëherë pjesa tjetër e numërimit do të rillogaritet në lidhje me vlerën e re.

Për Tag

atribut	Përshkrimi, vlera e pranuar
i kundërt	Atributi i kundërt specifikon se si të shfaqet lista në rend i kundërt(p.sh. 9, 8, 7…).
filloni	Atributi start specifikon vlera fillestare, nga e cila do të fillojë numërimi, për shembull, ndërtimi do të caktohet pika e parë numër serik"10". Ju gjithashtu mund të vendosni llojin e numërimit në të njëjtën kohë, për shembull, .
lloji	Atributi tip specifikon llojin e shënuesit që do të përdoret në listë (në formën e shkronjave ose numrave). Vlerat e pranuara: 1 është vlera e paracaktuar, numërimi dhjetor. A - numërimi i listës në sipas rendit alfabetik, shkronja të mëdha (A, B, C, D). a - numërimi i listës sipas rendit alfabetik, shkronjat e vogla (a, b, c, d). I - numërimi me numra romakë të mëdhenj (I, II, III, IV). i - numërimi me numra romakë të vegjël (i, ii, iii, iv).

Microsoft
Google
Apple

3. Lista e përkufizimeve

Listat e përkufizimeve krijuar me një etiketë

Blloku i listës së përkufizimeve ka stilet e mëposhtme të paracaktuar të shfletuesit:

Për etiketat

Dhe

në dispozicion.

Prodhuesi:: Petr Toçilin
Cast:: Andrey Gaidulyan; Alexey Gavrilov; Vitaly Gogunsky; Mariya Kozhevnikova

Oriz. 3. Lista e përkufizimeve

4. Lista e mbivendosur

Shpesh mundësi lista të thjeshta nuk është e mjaftueshme, për shembull, kur krijoni një tabelë të përmbajtjes, nuk mund të bëni pa sende të mbivendosura. Shënimi për një listë të ndërthurur do të ishte:

Paragrafi 1.
Pika 2.
- Nënklauzola 2.1.
- Nënklauzola 2.2.
  - Nënklauzola 2.2.1.
  - Nënklauzola 2.2.2.
- Nënklauzola 2.3.
Pika 3.

Oriz. 4. Lista e mbivendosur

5. Lista e numëruar me shumë nivele

Një listë me shumë nivele përdoret për të shfaqur artikujt e listës nivele të ndryshme me kompensime të ndryshme. Shënimi për një listë të numëruar me shumë nivele do të ishte:

paragraf
paragraf
1. paragraf
2. paragraf
3. paragraf
  1. paragraf
  2. paragraf
  3. paragraf
4. paragraf
paragraf
paragraf

Ky shënim i paracaktuar do të krijojë një numërim të ri për secilën listë të ndërthurur, duke filluar nga një. Për të bërë numërimin e mbivendosur, duhet të përdorni vetitë e mëposhtme:
kundër-rivendosja rivendos një ose më shumë numërues, duke i dhënë një vlerë për të rivendosur;
kundër-rritja vendos vlerën e rritjes së numëruesit, d.m.th. me çfarë hapi do të numërohet çdo artikull pasues;
përmbajtje - përmbajtje e krijuar, në këtë rastështë përgjegjës për shfaqjen e një numri përpara çdo artikulli në listë.

Ol ( /* hiqni numrin standard */ stil-listë: asnjë; /* Identifikoni numëruesin dhe jepni emrin li. Vlera e numëruesit nuk është e specifikuar - si parazgjedhje është 0 */ kundër-rivendos: li; ) li:before ( /* Përcaktojmë elementin që do të numërohet - li. Pseudoelementi para tregon se përmbajtja e futur duke përdorur veçorinë e përmbajtjes do të vendoset përpara artikujve të listës. Vlera e rritjes së numëruesit vendoset gjithashtu këtu (e parazgjedhur është 1) */ kundër-rritje: li; / * Numri i artikullit të listës del duke përdorur veçorinë e përmbajtjes.counters() do të thotë që teksti i krijuar është vlerat e të gjithë numëruesve me atë emër. Periudha e cituar shton një pikë ndarëse midis shifrave dhe një pikë me një hapësirë shtohet përpara përmbajtjes së çdo artikulli të listës */ përmbajtje: numëruesit(li,".") ". "; )
Oriz. 5. Lista e numëruar me shumë nivele