Si të krijoni një listë me pika në html. Lista me pika. Materiale të dobishme në listat HTML

Ekzistojnë dy lloje të listave në HTML: 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 ato me numër ashtu edhe shënues.

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ë shikojmë listat standarde, njësoj si në redaktorin e Word-it, dhe më pas do t'i përmirësojmë dhe do t'i dizajnojmë përtej njohjes.

Lista e numrave HTML

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

Artikulli i parë i listës

Artikulli i dytë i listës

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 etiketën e mbylljes, rezultati do të jetë saktësisht i njëjtë. Procesori është mjaft i zgjuar. Gjatë konvertimit të listës, ai analizon etiketat hapëse. Nëse sheh një të re

, pastaj vendoset automatikisht 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 panumëruara (ose pikat) krijohen në të njëjtën mënyrë, vetëm në vend të etiketës ol, shkruhet ul.

Nuk ka numra apo shkronja - vetëm simbole të ndryshme të quajtura shënues.

Lista e numëruar me shumë nivele HTML

Shumë përdorues janë të interesuar për këtë mundësi. Prandaj, duhet theksuar se çdo listë me numër HTML mund të bëhet me shumë nivele. Nivelet shtesë mund të jenë të njëjta ose të etiketuara.

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

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

Për ato me numër ne tregojmë alfabetin ose llojin e numrave, dhe për rastet e tjera - llojin e shënuesit.

Nëse përdorni një etiketë të veçantë HTML, lista e numëruar mund të bëhet gjithçka që dëshironi.

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

Përkthimi i vlerave është mjaft i thjeshtë. Njohja bazë e gjuhës angleze është e mjaftueshme. 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 e tipit.

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ë, është njësoj si type="1".

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

Përveç kësaj, ju mund të nxirrni përfundimin në rend të kundërt. Për ta bërë këtë ju duhet të shkruani të kundërt.

Hartimi i listave

Një listë me numra HTML mund të dizajnohet aq bukur saqë mund të mos e kuptoni menjëherë se kjo është një listë e rregullt dhe jo një fotografi e bërë në Photoshop.

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

Siç mund të shihet nga shembulli, ju mund të ndryshoni pamjen e numërimit dhe vetë elementëve.

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

Në stilet css ju 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 në të gjithë sitin ku përdoret ky skedar stili.

Le të shqyrtojmë së pari opsionin me një dizajn të listës së rrumbullakët. Kthehuni te kodi i listës. Lista e rrumbullakosur e klasës tregohet atje. Kjo është klasa me të cilën duhet të ndërhyni për të krijuar një bukuri të tillë. Ju mund ta emërtoni klasën si të dëshironi.

Tani le të shohim dizajnin katror.

Stilet janë mjaft 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 përdorin kompjuterë modernë. Jo të gjithë kanë të instaluar Windows 7, 8, 10. Ka një përqindje përdoruesish që janë ende në Windows XP dhe përdorin versione të vjetra të shfletuesit Internet Explorer.

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 nuk është bërë fare punë në hartimin e faqes. Se gjithçka është larguar. Elementet përplasen me njëri-tjetrin. Për të shmangur këtë, duhet të merrni parasysh të gjitha opsionet.

Disa webmaster mbyllin një sy ndaj tyre pasi pjesa e tyre në tregun modern bëhet gjithnjë e më e 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 variacionet e shfletuesit.

Listat e numëruara janë një koleksion elementësh me numrat e tyre serial. Lloji dhe lloji i numërimit varet nga parametrat e elementit

Numrat arabë (1, 2, 3, ...);
Numrat arabë me një zero të parë për numrat më të vegjël se dhjetë (01, 02, 03, ...,10);
shkronja të mëdha latine (A, B, C, ...);
shkronja të vogla latine (a, b, c, ...);
numra romakë të mëdhenj (I, II, III, ...);
numrat romakë të vegjël (i, ii, iii, ...);
numërimi armen;
Numërimi gjeorgjian.

Nga pikëpamja praktike, parimet e paraqitjes së artikujve në një listë me pika mund të zbatohen në mënyrë të ngjashme me një listë të numëruar. Por duke qenë se kemi të bëjmë me një numërim, ka disa veçori që do të diskutohen më tej.

Numërimi i listës

Lejohet fillimi i listës nga çdo numër; atributi start i elementit përdoret për këtë qëllim

. Vlera është çdo numër i plotë pozitiv. Nuk ka rëndësi se çfarë lloji numërimi është vendosur, edhe nëse shkronjat latine përdoren si listë. Nëse të dy atributet e fillimit dhe të vlerës aplikohen në një listë në të njëjtën kohë, atëherë kjo e fundit ka përparësi dhe numërimi shfaqet nga numri i specifikuar nga vlera , siç tregohet në shembullin 1.

Shembulli 1: Ndryshimi i numërimit të listës

Listat

Duhet të kujdeseni mirë për vendin tuaj të punës.
Rregulloni ndriçimin në dhomë në mënyrë që burimi i dritës të jetë i vendosur anash ose prapa operatorit.
Për të shmangur komplikimet mjekësore, rekomandohet të zgjidhni një karrige me një vend të butë.

Elementi i parë i listës në këtë shembull do të fillojë me numrin romak IV, pasi specifikohet atributi start="4", pastaj vjen numri V dhe elementi i fundit del jashtë rendit dhe i caktohet numri X (Figura 1).

Oriz. 1. Numrat romakë në listë

Shkrimi i numrave

Si parazgjedhje, një listë e numëruar ka një pamje të caktuar: fillimisht ka një numër, më pas një pikë dhe më pas teksti shfaqet i ndarë me një hapësirë. Kjo formë shkrimi është vizuale dhe e përshtatshme, por disa zhvillues preferojnë të shohin një mënyrë të ndryshme për të hartuar numërimin e listave. Gjegjësisht, në mënyrë që në vend të një pike të ketë një kllapa mbyllëse, siç tregohet në Fig. 2 ose diçka e ngjashme.

Oriz. 2. Pamja e listës me numër me kllapa

Stilet ju lejojnë të ndryshoni llojin e numërimit të listës duke përdorur vetitë e përmbajtjes dhe kundër-rritjes. Së pari, zgjedhësi ol duhet të vendoset në kundër-rivendosje : artikull , kjo është e nevojshme në mënyrë që numërimi në çdo listë të re të fillojë përsëri. Përndryshe, numërimi do të vazhdojë dhe në vend të 1,2,3 do të shihni 5,6,7. Vlera e artikullit është një identifikues unik për numëruesin; ne e zgjedhim atë vetë. Më pas, ju duhet të fshihni shënuesit origjinal përmes veçorive të stilit list-style-type me vlerën none.

Vetia e përmbajtjes zakonisht funksionon në lidhje me pseudoelementet ::after dhe ::para. Kështu, li::para ndërtimit thotë se disa përmbajtje duhet të shtohen përpara çdo elementi të listës (shembulli 2).

Shembulli 2. Krijimi i numërimit tuaj

Li::para (përmbajtja: kundër(artikull) ") "; /* Shto një kllapa numrave */ kundër-rritje: artikull; /* Vendosni emrin e numëruesit */ )

Vetia e përmbajtjes me numëruesin e vlerës (artikull) shfaq një numër; Duke shtuar një kllapa, siç tregohet në këtë shembull, marrim llojin e kërkuar të numërimit. nevojitet një kundër-rritje për të rritur numrin e listës me një. Vini re se i njëjti identifikues, i quajtur artikull , përdoret kudo. Kodi përfundimtar tregohet në shembullin 3.

Shembulli 3: Ndryshimi i pamjes së listës

Listat

Së pari
Së dyti
Së treti
Së katërti

Duke përdorur metodën e mësipërme, mund të bëni çdo lloj liste të numëruar, për shembull, të vendosni një numër në kllapa katrore, në këtë rast vetëm një rresht do të ndryshojë në stilet.

Përmbajtja: "[" counter(artikull) "] ";

Lista me shkronja ruse

Ekziston një listë e numëruar me shkronja latine, por nuk ka shkronja ruse për listën. Ato mund të shtohen artificialisht duke përdorur teknikën e mësipërme. Meqenëse numërimi bëhet përmes stileve, vetë lista mbetet origjinale, i shtohet vetëm klasa e zgjedhur, le ta quajmë cirilik (shembulli 4).

Shembulli 4: Kodi për të krijuar një listë

Një
Dy
Tre

Shtimi i shkronjave bëhet duke përdorur pseudo-elementin ::para dhe vetinë e përmbajtjes. Meqenëse çdo rresht duhet të ketë shkronjën e vet, ne do të përdorim pseudo-klasën :nth-child(1), me numrin e shkronjës të shkruar në kllapa. Shkronja e parë, natyrisht, është A, e dyta është B, e treta është C, etj. I gjithë ky grup i shtohet përzgjedhësit li si më poshtë (shembulli 5).

Shembulli 5: Përdorimi i pseudo-klasës:nth-child

cirilik li:nth-fëmijë(1)::para (përmbajtja: "a)"; ) .cirilik li:nth-fëmijë(2)::para (përmbajtja: "b)"; ) .cirilik li:nth-fëmijë(3)::para (përmbajtja: "at)"; )

Në këtë shembull, çdo shkronjë ndiqet nga një kllapa, të gjitha shkronjat janë të vogla. Ju mund të përcaktoni llojin tuaj të numërimit të listës, për shembull mund të përmbajë shkronja të mëdha me një pikë, me një ose dy kllapa ose vetëm shkronja. Ndryshe nga numërimi standard, ne jemi të lirë të bëjmë çfarë të duam këtu. Një listë me dhjetë shkronja duhet të jetë e mjaftueshme për pothuajse të gjitha situatat, por nëse kjo papritmas rezulton se nuk është e mjaftueshme, asgjë nuk na pengon të zgjerojmë listën tonë për të përfshirë të paktën të gjitha shkronjat e alfabetit rus.

Më në fund rregullojmë shtrirjen dhe pozicionin e shkronjave, sipas dëshirës specifikojmë madhësinë e shkronjave, ngjyrën dhe parametrat e tjerë (shembulli 6).

Shembulli 6. Lista me shkronja ruse

Listë

Borsch
Kotoleta pike
Kulebyaka
Kërpudha në salcë kosi
Pancakes me havjar
Kvass

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

Në gjuhën e shënjimit HTML, ekzistojnë 3 lloje listash - lista të renditura (të numëruara), të pa renditura (të panumëruara) dhe lista me definicion.

Për të krijuar një listë të tillë, ju nevojiten 2 lloje elementësh: 'ul' (shkurt për listë të pa renditur, d.m.th. listë e pa renditur) dhe 'li' (element liste). Çdo gjë e shkruar brenda 'li' shënohet me një shënues.

Shfaqja e një liste të tillë mund të kontrollohet duke specifikuar llojet e shënuesve.

Llojet e shënuesve

Ekziston një tipar i veçantë i tipit që vendoset në të dy elementët e listës. Ky është lloji juaj i shënuesit. Ekzistojnë vetëm 3 lloje: rrethi, disku dhe katrori:

Në varësi të vendit ku specifikoni llojin e shënuesit, mund ta ndryshoni atë për të gjithë listën ose për një element specifik.

Lista e porositur

Për të ndërtuar një listë, ju duhen gjithashtu 2 elementë: 'ol' dhe 'li' (elementi i listës). Shënuesit zëvendësohen me numra me një pikë. Shembull i një liste të thjeshtë:

elementi i parë
elementi i dytë
elementi i fundit

Ju mund të kontrolloni pamjen e listës së renditur duke specifikuar lloje të ndryshme numërimi.

Llojet e numërimit

Ekziston një tipar i veçantë i tipit që vendoset në elementin 'ol' ose 'li'. Ky është lloji i listës suaj. Gjithsej janë 5 lloje:

Në varësi të vendit ku specifikoni llojin e numërimit, mund ta ndryshoni atë për të gjithë listën ose për një element specifik.

Lista e përkufizimeve

Një listë përkufizimesh është zhvilluar për hyrjet e fjalorit.

Ekziston një enë e përgjithshme 'dl'. Brenda tij janë "dt" (terminimi i përkufizimit) dhe "dd" (përshkrimi i përkufizimit). Shembulli më i thjeshtë:

Departamenti i Marketingut: Ky departament është i angazhuar në promovimin e mallrave dhe shërbimeve
departamenti financiar: Ky departament merret me të gjitha transaksionet financiare

Të gjithë elementët e të gjitha listave janë elemente blloku. Por vetëm elementët inline mund të vendosen brenda elementit 'dt'. Mund të vendosni gjithçka që dëshironi në elementet 'dd' dhe 'li'. Këtu vijnë listat e mbivendosura.

Të mbivendosur (lista të përziera)

Këto janë lista me shumë nivele, brenda të cilave ekziston një hierarki. Shpesh lista të tilla përdoren kur ndërtohet një hartë e faqes. Shembull:

LAJMET E DITËS: Sot shiu
Do të bjerë shi gjithë ditën
LAJME E NATES

Natën do të bjerë shi
Nesër do të nisë një ditë e re
LAJME E NATES: Natën do të bjerë shi
Nesër do të nisë një ditë e re

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

listë me pika —
- çdo element të listës
shënuar me një shënues,
listë me numër —
- çdo element të listës
shënuar me një numër
lista e përkufizimeve- - përbëhet nga çifte termash
—
përkufizimi.
Çdo listë është një kontejner brenda të cilit ndodhen elementet e listës ose çiftet e përkufizimit të termave. Elementet e listës sillen si elementë blloku, të vendosur nën njëri-tjetrin dhe duke zënë të gjithë gjerësinë e bllokut të kontejnerit. Çdo artikull i listës ka një bllok shtesë të vendosur në anë, i cili nuk merr pjesë në paraqitjen.

Krijimi i listave HTML

1. Lista me pika

Lista me pikaështë një listë e parregulluar (nga Lista angleze e pa renditur). Krijuar duke përdorur një etiketë të çiftuar
. Shënuesi i një elementi të listës është një etiketë, për shembull, një rreth i mbushur.
Shfletuesit si parazgjedhje shtojnë formatimin e mëposhtëm në bllokun e listës:
Çdo element i listës krijohet duke përdorur një etiketë të çiftuar
(nga artikulli i listës angleze).

në dispozicion.

Microsoft

Google

Apple

Oriz. 1. Lista me pika
2. Lista e numëruar

Lista e numëruarështë krijuar duke përdorur një etiketë të çiftuar. Çdo artikull i listës krijohet gjithashtu duke përdorur elementin
. Shfletuesi numëron automatikisht elementët sipas renditjes dhe nëse fshini një ose më shumë elementë të një liste të tillë, numrat e mbetur do të rillogariten automatikisht.
Blloku i listës ka gjithashtu stile të paracaktuara të shfletuesit:
Atributi i vlerës është i disponueshëm, i cili ju lejon të ndryshoni numrin e paracaktuar për artikullin e përzgjedhur të listës. Për shembull, nëse për artikullin e parë në listë keni vendosur
, atëherë numri i mbetur do të rillogaritet në lidhje me vlerën e re.
Për tag
Atributet e mëposhtme janë në dispozicion:
Tabela 1. Atributet e etiketës

atribut Përshkrimi, vlera e pranuar
i kundërt Atributi i kundërt bën që lista të shfaqet në rend të kundërt (për shembull, 9, 8, 7...).
filloni Atributi start specifikon vlerën fillestare nga e cila do të fillojë numërimi, për shembull, një ndërtim
artikullit të parë do t'i caktohet numri serial "10". Ju gjithashtu mund të specifikoni 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ë (shkronjat ose numrat). Vlerat e pranuara:
1 — vlera e paracaktuar, numërimi dhjetor.
A - numërimi i listës sipas rendit alfabetik, shkronjat e 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

Oriz. 2. Lista e numëruar
3. Lista e përkufizimeve

Listat e përkufizimeve krijohen duke përdorur një etiketë
. Për të shtuar një term, përdorni një etiketë
, dhe për të futur një përkufizim - etiketën
.

Blloku i listës së përkufizimeve ka stilet e mëposhtme të parazgjedhur të shfletuesit:
Për etiketat
,
Dhe
në dispozicion.

Drejtori:

Peter Tochilin

Cast:

Andrey Gaidulyan

Alexey Gavrilov

Vitaly Gogunsky

Mariya Kozhevnikova

Oriz. 3. Lista e përkufizimeve
4. Lista e mbivendosur

Shpesh, aftësitë e listave të thjeshta nuk janë të mjaftueshme; për shembull, kur krijoni një tabelë të përmbajtjes, nuk ka asnjë mënyrë për të bërë pa sende të mbivendosura. Shënimi për listën e mbivendosur do të ishte si më poshtë:

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 në nivele të ndryshme me dhëmbëzime të ndryshme. Shënimi për një listë të numëruar me shumë nivele do të ishte si më poshtë:

paragraf

paragraf

paragraf

paragraf

paragraf

paragraf

paragraf

paragraf

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 me një. Për të krijuar numërimin e ndërthurur, duhet të përdorni vetitë e mëposhtme:
kundër-rivendosja rivendos një ose më shumë numërues, duke specifikuar vlerën që do të rivendoset;
kundër-rritja specifikon vlerën e rritjes së numëruesit, d.m.th. në çfarë rritjesh do të numërohet çdo artikull pasues;
përmbajtje - përmbajtje e gjeneruar, në këtë rast ajo është përgjegjëse për shfaqjen e numrit para çdo artikulli të listës.
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-rivendosur: li; ) li :before ( /* Përcaktojmë elementin që do të numërohet - li. Pseudoelementi para tregon se përmbajtja e futur duke përdorur vetinë e përmbajtjes do të vendoset para artikujve të listës. Këtu vendosim edhe vlerën e rritjes së numëruesit (default është 1). */ kundër-rritje: li; / * Vetia e përmbajtjes shfaq numrin e artikullit të listës. counters() do të thotë që teksti i krijuar përfaqëson vlerat e të gjithë numëruesve me atë emër. Një pikë në thonjëza shton një periudhë ndarëse midis numrave 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

Përditësimi i fundit: 04/08/2016

Një listë përkufizimesh është një listë që përmban një term dhe një përkufizim për atë term. Dhe mund të ketë shumë çifte të tilla me përkufizim termash në listë. Etiketat përdoren për të krijuar një listë përkufizimesh
Dhe
. Elementet e listës vendosen brenda këtyre etiketave.

Çdo element i listës përbëhet nga një term dhe një përkufizim. Termi vendoset në etiketa
Dhe
(dt është shkurtim për "term definicion"), dhe përkufizimi është në etiketa
Dhe
(dd është e shkurtër për "përshkrimin e përkufizimit")

Le të shqyrtojmë listën më të thjeshtë të përkufizimeve:
Listat në HTML5

Ontologjia

Degë e filozofisë që studion parimet themelore të ekzistencës

Epistemologjia

Disiplinë filozofike që merret me kërkimin, kritikën dhe teoritë e dijes

Marrëdhëniet e prodhimit

Tërësia e marrëdhënieve midis njerëzve që zhvillohen në procesin e prodhimit shoqëror, shkëmbimit dhe shpërndarjes së të mirave dhe shërbimeve materiale.

atribut	Përshkrimi, vlera e pranuar
i kundërt	Atributi i kundërt bën që lista të shfaqet në rend të kundërt (për shembull, 9, 8, 7...).
filloni	Atributi start specifikon vlerën fillestare nga e cila do të fillojë numërimi, për shembull, një ndërtim artikullit të parë do t'i caktohet numri serial "10". Ju gjithashtu mund të specifikoni 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ë (shkronjat ose numrat). Vlerat e pranuara: 1 — vlera e paracaktuar, numërimi dhjetor. A - numërimi i listës sipas rendit alfabetik, shkronjat e 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).