Shembuj të stilit elegant të listave të ul CSS. Stilimi i numrave (shifrave) të linjave në listat e renditura ol Etiketat përdoren për të stiluar listat e numëruara

Kuptimi dhe zbatimi

Një listë e numëruar (e renditur) është për artikujt që ndjekin në një renditje specifike. Një listë e numëruar fillon me një etiketë

(shkurt anglisht lista e porositur - lista e renditur). Çdo artikull i listës fillon me një etiketë
1. (pika e listës).

   Mbështetja e shfletuesit

   Atribut			Opera		Eksplorues	Edge
   fillo, shkruaj	po	po	po	po	po	po
   përmbysur	po	po	po	po	Jo	Jo

   Atributet

   Atribut	Vlera	Përshkrim
   kompakt	kompakt	Nuk mbështetet në HTML5. Tregon që lista duhet të jetë më e vogël se madhësia normale (lartësia e vijës: 80%). Përdorni CSS në vend të kësaj cilësie.
   	përmbysur	Tregon që renditja në një listë të numëruar (renditur) duhet të jetë zbritëse. Atributi nuk mbështetet nga shfletuesit e Internet Explorer dhe Edge.
   filloj	numri	Përcakton vlerën fillestare të një liste të renditur (të porositur). Vlerat duhet të jenë të plota, vlerat negative lejohen. Kur përdoret me shkronja (tipi \u003d "A" dhe tipi \u003d "a"), numri i specifikuar në vlerën e atributit është numri rendor i shkronjës në alfabet. Për shembull, start \u003d "4" do të përputhet me shkronjën "D" dhe lista do të fillojë me të. Përdorimi i vlerës start \u003d "27" pastron numëruesin, dhe lista bëhet dyshifrore ("27" \u003d "AA", "28" \u003d "AB", "29" \u003d "AC" ...).
   lloji	1 (parazgjedhur) Një pjesë të madhe) a (e vogël) Unë (i madh romak) unë (i vogël romak)	Përcakton llojin e plumbit të përdorur në ndërtimin e një liste të numëruar (të porositur).

   Shembull i përdorimit

   1. Pika e parë Pika e dytë
   2. Pika e tretë

   Do të duket kështu në faqe:

   1. Pika e parë.
   2. Pika e dytë.
   3. Pika e tretë.

   Nëse dëshironi që lista të fillojë nga një numër specifik (jo nga 1), atëherë duhet të specifikoni atributin start për etiketën

   .

   Për shembull:

   Një atribut tjetër interesant është lloji, i cili do t'ju lejojë të specifikoni numërimin alfabetik ("A" - i madh, "a" - i vogël), ose numërimi nga numrat romakë ("I" - me shkronja të mëdha, "i" - me shkronja të vogla).

   Merrni parasysh një shembull që tregon të gjitha vlerat e mundshme për tiparin tip (përveç standardit):

   >
   1. Pika e parë Pika e dytë
   2. Pika e tretë
   >
   1. Pika e parë Pika e dytë
   2. Pika e tretë
   >
   1. Pika e parë Pika e dytë
   2. Pika e tretë
   >
   1. Pika e parë Pika e dytë
   2. Pika e tretë

   Unë tërheq vëmendjen tuaj për faktin se lejohet të formohen lista të numëruara (të renditura) të vendosura në listat e tjera të numëruara (brenda një artikulli të listës

   3. ):
      1. Pika e parë
         1. Pika e parë Pika e dytë
         2. Pika e tretë
         Pika e dytë
         3. Pika e tretë

         Do të duket kështu në faqe.

         Le të vazhdojmë bisedën tonë në lidhje me fillimet e html. Në këtë artikull, unë dua të flas rreth mënyrës së krijimit të paragrafëve, listave dhe titujve në tekst. Dhe gjithashtu rreth etiketave të vetme
         dhe

         ---

         .

         Unë ju këshilloj fuqimisht të lexoni mësimin e parë në këtë seri, si dhe një artikull hyrës për fillimin e mësimit të HTML për ata që nuk janë ende të njohur me to.

         Tani do të vazhdojmë studimin tonë të etiketave. Unë do të supozoj se lexuesi tashmë është njohur me materialin e artikujve të mësipërm.

         Si gjithmonë, plani i punës:

         1. Paragrafët
         2. Prishet e vijave
            
         3. Listat dhe listoni artikujt
         4. Titujt
         5. Sunduesit horizontale

            ---

         Paragrafët

         Teksti është pothuajse gjithmonë i përbërë nga paragrafë. Një paragraf është një element i tekstit që mbart një ide të plotë.

         Në HTML, një paragraf, siç mund të gjykohet nga titulli, është caktuar. Shkronja "p" është marrë nga fjala "paragraf", që do të thotë thjesht "paragraf".

         Le të shqyrtojmë një shembull:

         Teksti i paragrafit të parë. Përmban mendim. Por pastaj mendimi mbaroi.
         

         
         

         Një mendim tjetër tashmë ka filluar dhe ne po e shkruajmë atë në një paragraf tjetër.
         

         Siç mund ta shihni, zbatimi i paragrafëve është shumë i thjeshtë dhe nuk kërkon ndonjë koment të veçantë. Nëse e shikojmë këtë kod në një shfletues, do të shohim dy rreshta me një vijë të zbrazët midis tyre. Në tekstet ruse, është zakon të ndahet një paragraf jo me një vijë të zbrazët, por duke zhvendosur rreshtin e parë në të djathtë. Por në internet përdoret vetëm një formatim i tillë, prandaj shpesh lihet edhe në tekstet në gjuhën ruse. Sidoqoftë, nëse kjo sjellje nuk ju përshtatet, mund ta ndryshoni duke përdorur CSS.

         Prishet e vijave
         

         Ndonjëherë ju duhet të përktheni një rresht pa i dhënë fund mendimit, pa mbyllur paragrafin. Kjo është, thjesht shkoni në një linjë të re. Ekziston një etiketë e vetme për këtë
         ... Këtu është një shembull i zbatimit të tij:

         Era ecën me qejf
         
         Dhe anija kërkon
         
         Ai vrapon drejt vetes në valë
         Me velat e ngritura.
         

         Ky fragment i një poezie nga A.S. Pushkin na ndihmoi të ilustrojmë veprimin e etiketës
         ... Vendosa qëllimisht dy linjat e fundit të këtij katërkëndëshi në një rresht të kodit për të treguar që linjat mbështillen në një vijë të re jo sepse vendosëm ndërprerje linjash, por sepse vendosëm etiketa
         ... Ky etiketë është shumë e thjeshtë dhe nuk ka nevojë për shpjegim të hollësishëm, kështu që këtu do ta përfundojmë diskutimin tonë.

         Listat,

         dhe listoni artikujt

         Ndonjëherë në tekst duhet të renditni diçka. Për këtë qëllim përdoren tre etiketa: ul, ol, li. Të gjitha këto etiketime janë etiketat e kontejnerëve, por etiketa gjithmonë përmbahet në një nga kontejnerët ose, dhe nuk ka kuptim jashtë tyre. Enë ul përdoret kur nuk na intereson renditja e artikujve të renditur dhe nuk duam të përqendrohemi në rendin sipas të cilit shkojnë. Nga ana tjetër, etiketa ol thekson sekuencën e artikujve duke numëruar automatikisht secilën rresht. Le të shqyrtojmë një shembull:

         
         
         • Bulka
         
         
         • Byrek
         
         
         • Bukë
         
         
         • Byrek
         
         

         Në ekranin e shfletuesit, ky kod do të duket kështu:

         • Bulka
         • Byrek
         • Bukë
         • Byrek

         Nëse thjesht zëvendësojmë etiketën ul me etiketën ol, kemi një listë të numëruar:

         
         
         1. Bulka
         
         
         2. Byrek
         
         
         3. Bukë
         
         
         4. Byrek
         
         

         Tani duket kështu:

         1. Bulka
         2. Byrek
         3. Bukë
         4. Byrek

         Askush nuk e ndalon folejen e një liste në një tjetër, duke formuar lista të vendosura me lista:

         
         Mjetet:
         
         • Pashë
         
         
         • Kaçavidë
           
           
           
           1. Drejt
           
           
           2. Kryq
           
           
           
           
         
         
         • Stërvitje
         
         

         Ju duhet të eksperimentoni pak me këto lista për t'u mësuar t'i përdorni ato. Ekziston një lloj tjetër i listave, por përdoret rrallë, prandaj nuk do të flas për këtë tani. Ndoshta në një artikull tjetër.

         Sigurisht, si çdo gjë tjetër, pamja e këtyre elementeve mund të ndryshohet përtej njohjes me CSS.

         Titujt

         Sigurisht, paragrafët ndihmojnë në strukturimin e dokumenteve. Por, në mënyrë që të ndash një tekst të madh në pjesë më të vogla logjike, mund të titrosh secilën prej tyre. Secila pjesë mund të përmbajë më shumë nënpjesë, me titujt e tyre të nivelit më të ulët, etj. Për të vendosur titullin, përdorni etiketat , ku "x" është një numër nga 1 në 6. Sa më i lartë të jetë numri, aq më i ulët është titulli. Kjo do të thotë, titulli i nivelit më të lartë do të quhet h1, dhe kreu i më së shumti do të jetë h6. Si parazgjedhje, teksti në këto tituj shfaqet me shkronja të mëdha, të prera. Ky tekst shfaqet në të gjithë vijën, domethënë, etiketat hx janë të bazuara në bllok. Etiketimi h1 ka shkronjën më të madhe dhe etiketën h6 ka më të voglin. Si rregull, ka një, maksimum dy, etiketa të nivelit të lartë h1 në një faqe. Ndërsa niveli zvogëlohet, numri i etiketave rritet. Por rrallë një administrator i faqes në internet do të jetë në gjendje të ndajë tekstin në një mënyrë të tillë që të ketë nevojë për tituj të 5 ose 6 niveleve. Edhe niveli 4 përdoret rrallë.

         Flisni më pak, punoni më shumë!

         Listat mund të numërohen dhe të numërohen.

         Listat e numëruara nxirren me kod:

         Rendit me numra
         1. paragrafi 1
         2. pika 2
         3. pika 3

         Listat pa numër nxirren nga kodi:

         Renditni me shenja kontrolli ose simbole të tjera
         • paragrafi 1
         • paragrafi 1
         • paragrafi 1

         Çdo artikull në çdo listë është i mbyllur në një etiketë li. Të gjithë artikujt e listës janë mbështjellë me një etiketë të zakonshme ul ose ol. Stilet e këtyre etiketave janë të shkruara në fletën e stileve.

         Për secilën etiketë, caktohen stile specifike vizuale. Ato tregojnë indentet nga teksti.

         Për një listë të numëruar, stilet e numërimit janë të përshkruara për secilin artikull.

         Numrat standardë arabë përshkruhen nga vlera dhjetore.

         lloji i stilit të listës: dhjetore; / * Shifrat arabe * /

         Për një listë me pika, ju specifikoni stilin e karakterit - katrorët ose qarqet.

         lloji i stilit të listës: rrethi; / * qarqet * /
         lloji i stilit të listës: katrori; / * sheshet * /

         Secilit artikull të menusë mund t'i caktohet një imazh.

         lista-style-image: url ('rruga për në imazh');

         Zakonisht, në shabllone, një listë e numëruar formatohet me numra të thjeshtë dhe jo të numëruar - me katrorë dhe rrathë të zinj. Bshtë e mërzitshme dhe jo shprehëse. Le ta rregullojmë këtë.
         

         Ku janë stilet e listave në modelin Njëzet Njëmbëdhjetë?

         Hapni stilin e stilit.css. Gjeni seksionin e quajtur / * Elementet e tekstit * /

         Kodi standard duket kështu:

         Si mund të rregulloj një listë të numëruar?

         Lista e numëruar duke përdorur sfondin

         Shikoni këtë dizajn të bukur të listës me numër.

         Si? Le ta bejme sërisht.

         Gjeni stilet për etiketën ol. Shtoni prona të reja në të.

         Ol (mbushje: 0px 0 0 20px; diferencë: 0.5em 0 1.571em 1.9em; ngjyra: # 2E2E2E; lloji i stilit të listës: asnjë; font: 15px / 17px Verdana, Arial, Helvetica, sans-serif; z-index : 2; kundër-rivendosja: pika;) ol li (margjina-fund: 4px; lartësia e vijës: 1.6; ngjyra: # 2E2E2E; pozicioni: relativ;) ol li: para (diferenca-fund: 4px; kundër-rritja: pika 1; lartësia e vijës: 1.6; lartësia: 24px; margjina-majtas: -36px; majtas: 0px; gjerësia: 24px; margin-top: 1px; sfondi: # BDC3C7; përmbajtja: counter (pikë); rreshtimi i tekstit: qendra; pozicioni: absolut; pesha e shkronjave: e theksuar;)

         Në mënyrë që ju të kuptoni se ku duhet të ndryshoni për t'iu përshtatur modelit tuaj, le ta marrim këtë kod veç e veç.

         lloji i stilit të listës: asnjë; - pamundëson daljen e shifrave standarde
         kundërvendosja: pika; - vendos një ndryshore për numëruesin e numërimit
         pozicioni: relativ; - vendet e numërimit pranë pikave vetë

         më parë është një pseudo-element për etiketën ol li. Ka stilet e mëposhtme:
         përmbajtja: counter (pikë); - shfaq vlerën e një ndryshoreje
         kundër-rritje: pika 1; - rrit numrin me 1
         pozicioni: absolut;
         sfondi: # BDC3C7; - sfondi për numrat (sfondi mund të vendoset me ngjyra ose një ikonë të bukur
         marzhi - kufijtë
         mbushje - mbushje
         ngjyra - ngjyra e tekstit të elementit
         sfond - sfond
         përafrimi i tekstit - rreshtimi i tekstit
         font-weight - pesha (pesha) e shkronjave

         Në stilet tuaja, mund të vendosni çdo ngjyrë, rreshtim, madhësi të shkronjave dhe dhëmbëzime.

         Lista e numëruar me një imazh unik për secilin artikull

         Një faqe për gratë ka disa lista me numër mjaft tërheqës.

         Si zbatohet kjo? Le të hedhim një vështrim në kodin e mëposhtëm:

         / * numri i parë * / ol li: fëmija i parë (stili i stilit të listës: url (rruga për në figurë me numrin 1);) / * numri i dytë * / ol li: nth-child (2n) (stili i listës- imazhi: url (rruga për në figurë me numrin 2);) / * numri i tretë * / ol li: nth-child (3n) (lista-style-image: url (rruga për në figurë me numrin 3);) / * numri i katërt * / ol li: nth-child (4n) (lista-style-image: url (rruga për tek figura me numrin 4);) / * Tjetra, ne shkruajmë në të njëjtën mënyrë vetëm për numrat e artikullit vijues * /

         Në kodin e një liste të tillë të numëruar, duhet të rendisni të gjithë numrat e artikujve dhe të caktoni një ikonë unike për secilin prej tyre.

         Nëse në listat e artikujve përdorni deri në 20 artikuj të numëruar, atëherë duhet të regjistroni klasën pseudo të fëmijës së nëntë (Një) 20 herë. Kështu që e fundit në stile është pseudo-klasa e fëmijëve të nëntë (20n).

         Gjeni linjat në fletën e stileve që përshkruajnë paraqitjen e listës së numëruar (etiketat ol li).

         Shtoni asaj pseudo-klasën e fëmijës së parë. Kopjoni dhe ngjisni një herë, pastaj ndryshoni këtë veti në nth-child (An) dhe kopjoni sa më shumë numra që dëshironi të ketë ikona juaj. Shtoni numrat e artikujve.

         Për secilin numër, shtoni një veti të imazhit në stilin e listës me ikonën e vet unike.

         Nëse ikonat në sit ndodhen larg pikave ose i mbivendosin ato, atëherë duhet të ndryshoni shtrirjen dhe dhëmbëzimet e ikonave dixhitale ose tekstin e pikave.
         

         Si të rregulloni një listë me plumba (pa numër)?

         Ul li lista me pika me ikona alternative

         Më pëlqeu shumë kjo listë me pika.

         Ul (mbushja: 11px 0 5px 0;) ul li (mbushja-majtas: 32px; margin-fund: 10px; font: normal 15px Verdana, sans-serif; ngjyra: # 2E2E2E; lartësia e vijës: 1.6; fundi i kufirit: 1px #ccc ndërprerë; fundi i mbushjes: 10px;) ul li: para (përmbajtja: ""; pozicioni: absolut; gjerësia: 27px; lartësia: 24px; margjina-majtas: -35px; margin-top: -2px; sfondi: url ("images / sprite.jpg") 0px 2px pa përsëritje; lista-style-type: rreth;) ul li: nth-child (2n): më parë (përmbajtja: ""; pozicioni: absolut; gjerësia: 27px; lartësia: 43px; margjina-majtas: -35px; margin-top: -2px; sfondi: url ("images / sprite.jpg") 0px -17px pa përsëritje; lloji i stilit të listës: rrethi;)

         Në vend të stilit standard të stilit të listës, mund të caktoni vetinë "rruga për tek ikona" - lista-stili-imazhi: url. Por atëherë duhet të regjistroni kufirin e jashtëm të majtë nga skajet e faqes - pa të, ikonat nuk do të shfaqen, ato do të shkojnë përtej zonës së përmbajtjes.

         Për eksperimentin, mund të caktoni dhëmbëzime:

         Ul li (lista-style-image: url (images / radio.png); margjina-majtas: 30px;)

         Alternimi i ikonave mund të caktohet me vetinë e fëmijës së nëntë (Një). Shembulli i mësipërm përdor pseudo-elementin para.

         Kodi përmban një pseudo-klasë n-fëmijë (2n). Vlera e tij është 2. Rezulton se secili artikull çift ka një ikonë të ndryshme. Nëse në vend të 2n shkruani 2n + 1, atëherë ikona tjetër do të bjerë në pika tek.

         Ju mund të vendosni një nënvizim për secilin artikull në listë. Në shembullin e treguar, artikujt nënvizohen me vija me pika.

         Gjithashtu, secilit artikull mund t'i caktohen kornizat, sfondi, ikonat. Thjesht mos u tregoni shumë të zgjuar. Detyra jonë nuk është të mposhtim të gjithë me një model të zbukuruar, por të përmirësojmë cilësinë e perceptimit të përmbajtjes.
         

         Si të shfaqni lista të shumta me dizajn të ndryshëm në një faqe?

         Ndonjëherë ju duhet të vendosni disa lista me stile të ndryshme.

         Nëse caktoni stile të zakonshme, atëherë e njëjta pamje do të caktohet në të gjitha listat. Listat e ndryshme mund të shfaqen nëse i caktoni një ID të veçantë etiketës ol ose ul dhe e regjistroni atë në modalitetin e redaktimit të artikullit html. Epo, në fletën e stileve për këtë ID, duhet të regjistroni stile të ndara.

         Për shembull, këtu është një paraqitje e bukur për përmbajtjen:

         Në HTML, ju shkruani listën si kjo:

         Përmbajtja
         1. paragrafi 1
         2. pika 2
         3. pika 3

         Në CSS, ju do të shkruani stile si kjo:

         Ol # sod (mbushje: 0px 20px 10px 51px; diferencë: 0,5em 0 0em 1em; ngjyra: # 2E2E2E; lloji i stilit të listës: asnjë; sfond: # f1f4f5; kufiri majtas: # BDC3C7 4px i ngurtë; shfaqja: inline- bllok;) ol # sod li () ol # sod li: para (pesha e shkronjave: normale! e rëndësishme)

         Stili i ri ndryshon nga etiketa kryesore olimpike: sfondi, stili i shfaqjes, linja në të majtë të përmbajtjes.

         Duke përdorur disa lista me dizajn të ndryshëm në tekst, ju do ta bëni prezantimin e informacionit edhe më interesant. Kur renditni ndonjë send, mund të vendosni disa ikona, dhe kur rendisni veprime, të tjerë. Këtu, dizajni është i kufizuar vetëm nga imagjinata juaj.

         Këto metoda janë gjithashtu të zbatueshme në hartimin e artikujve të menusë, kategorive dhe çdo elementi tjetër të faqes.
         

         Si mund të krijoj lidhje ankorimi në një listë të përmbajtjes?

         Si i shkruani ato në kodin HTML? Një pjesë e kodit kornizon spirancën e lidhjes, dhe një pjesë tjetër e kodit vendoset pranë vendit ku duhet të biem kur të klikojmë në lidhje.

         Përmbajtja
         1. Titulli 1
         2. Titulli 2
         3. Titulli 3

         Dhe në tekstin e artikullit duhet të shkruani kështu:

         Kreu 1 ... Kreu 2 ... Kreu 3 ...

         Ndoshta webmasterat më me përvojë do të më korrigjojnë diçka. Unë thjesht rekomandoj atë që kam provuar në praktikë vetë.

         Nëse keni ende ndonjë pyetje, unë do të jem i lumtur t'i shoh ato në komente.

         Ageeva Veronika.

         Ndoshta do të interesoheni gjithashtu për:

         Nëse vendosni të ndryshoni listat e paracaktuara ul dhe li, atëherë kjo temë do t'ju interesojë. Meqenëse këtu do të gjeni disa zgjidhje origjinale. E cila me siguri do t'ju ndihmojë të ndryshoni pamjen standarde në një pamje unike, ku shkon stili CSS, për hartimin e listave. Plus është se ne do të përdorim vetëm një klasë në gjithçka, e cila do të ndryshojë rrënjësisht pamjen. Përveç këtyre parametrave, mund të specifikoni se në cilin numër duhet të fillojë lista, këtu mund të bëni gjithçka vetë. Default fillestar për listat e numëruara është në shkronjën e parë ose A.

         Bazuar në bazat, tani do të hedhim një vështrim më të afërt të elementeve të përdorura për të siguruar strukturën dhe kuptimin e pjesëve të ndryshme të dizajnit. Nëse dikush nuk e di, ul dhe li janë opsione shumë më të mira sesa teksti i thjeshtë, sepse kur teksti mbështillet, veçanërisht në celular, ai është i mbushur në mënyrë të përsosur dhe nuk mbështillet rreth shënuesit.

         Listat konsiderohen të jenë një mënyrë e shkëlqyeshme për të paraqitur informacione në faqe, sepse lexohen lehtë dhe duken mirë. Shumë njerëz duket se mendojnë se pikat e plumbave janë imazhe të vogla, por në të vërtetë të gjitha janë krijuar përmes një kodi HTML mjaft të thjeshtë. Ju mund të vendosni lloje të ndryshme të listave brenda njëra-tjetrës nëse dëshironi, thjesht mos harroni t'i mbyllni ato në mënyrë korrekte. Ju mund të luani me tekstin që dëshironi në të gjitha këto komanda të listës.

         Ju gjithashtu duhet të dini që listat përmbajnë fillimisht disa elemente:

         1 ... Informacion i çrregulluar.
         2 ... Informacion i porositur.
         3 ... Përkufizimet

         Fillimi me instalimin:

         1. Opsioni:

         
         
         • Artikulli i listës
         
         
         • Lista unike
         
         
         • Listat origjinale
         
         
         • ZORNET.RU - Për Uebmaster
         
         
         • Një listë tjetër
         
         
         
         CSS

         Ksangelopan (
         marzhi: 19px 0 0;
         mbushje: 0;
         stili i listës: asnjë;
         kundërvendosja: li;
         }
         .ksangelopan li (
         kufiri: 2px solid # 3575ad;
         sfond: # d7dee4;
         pozicioni: relativ;
         margin-fund: 17px;
         mbushje: 15px 9px;
         }
         .ksangelopan li: hover (
         indeksi z: 1;
         }
         .ksangelopan li: para (
         kufiri: 2px solid # 2270b3;
         pozicioni: absolut;
         maja: -14px;
         mbushje: 3px 9px;
         madhësia e shkronjave: 11px;
         pesha e shkronjave: e theksuar;
         ngjyra: # 246eaf;
         sfond: # f2f4f7;
         kundër-rritje: li;
         përmbajtja: counter (li);
         -webkit-tranzicioni-kohëzgjatja: 0.4 sekonda;
         kohëzgjatja e tranzicionit: 0.4 sekonda;
         }
         .ksangelopan li: rri pezull: para (
         sfond: # 2672b3;
         ngjyra: # f7f9fb;
         -vebkit-transformim: përkthyer (-11px, 0);
         -ms-transform: përkthyer (-11px, 0);
         -o-transformoj: përkthej (-11px, 0);
         shndërroni: përktheni (-11px, 0);
         }
         .ksangelopan li: pas (
         përmbajtja: "";
         pozicioni: absolut;
         kohëzgjatja e tranzicionit: 0,3 sekonda;
         -vebkit-tranzicion-vetia: gjerësia;
         prona e tranzicionit: gjerësia;
         indeksi z: -1;
         sfondi: #FFF;
         lartësia: 100%;
         majtas: 0;
         maja: 0;
         gjerësia: 0;
         }
         .ksangelopan li: rri pezull: pas (
         gjerësia: 100%;
         }

         
         Ky është i gjithë instalimi.

         2 Opsioni i dytë:

         

         
         
         • Artikulli i listës
         
         
         • Lista unike
         
         
         • Listat origjinale
         
         
         • ZORNET.RU - Për Uebmaster
         
         
         • Një listë tjetër
         
         
         
         CSS

         Beleduzlopamges (
         margin-fund: 8px;
         mbushje: 0;
         stili i listës: asnjë;
         kundërvendosja: li;
         }
         .beleduzlopamges li (
         pozicioni: relativ;
         kufiri: 2px solid # 195588;
         sfond: # eff3f7;
         mbushje: 15px 19px 15px 27px;
         diferencë: 12px 0 12px 40px;
         -kohëzgjatja e tranzicionit të faqeve të internetit: 0.3 sekonda;
         kohëzgjatja e tranzicionit: 0,3 sekonda;
         }
         .beleduzlopamges li: hover (
         sfondi: #FFF;
         }
         .beleduzlopamges li: para (
         lartësia e vijës: 32px;
         pozicioni: absolut;
         maja: 4px;
         majtas: -39px;
         gjerësia: 39px;
         rreshtimi i tekstit: qendra;
         madhësia e shkronjave: 16px;
         pesha e shkronjave: e theksuar;
         ngjyra: # f9f5f5;
         sfond: # 275b88;
         kundër-rritje: li;
         përmbajtja: counter (li);
         kohëzgjatja e tranzicionit: 0,2 sekonda;
         }
         .beleduzlopamges li: rri pezull: para (
         gjerësia: 46px;
         }
         .beleduzlopamges li: pas (
         pozicioni: absolut;
         majtas: 0;
         maja: 4px;
         përmbajtja: "";
         lartësia: 0;
         gjerësia: 0;
         kufiri: 16px solide transparente;
         kufiri-majtas-ngjyra: # 275b88;
         -kohëzgjatja e tranzicionit të faqeve të internetit: 0.2 sekonda;
         kohëzgjatja e tranzicionit: 0,2 sekonda;
         }
         .beleduzlopamges li: rri pezull: pas (
         diferencë-majtas: 6px;
         }

         
         Shkalla e qendrës mund të vendoset në mënyrë të pavarur që të përputhet me stilin kryesor të faqes.

         3 Opsioni i tretë:

         

         
         
         • Skenare për uCoz
         
         
         • Modele për uCoz
         
         
         • Krijimi i faqes në internet
         
         
         • Stilet për sitin
         
         
         • Stilimi i CSS
         
         
         
         CSS

         Nizualisanelag (
         mbushje: 0;
         stili i listës: asnjë;
         kundërvendosja: li;
         }
         .nizualisanelag li (
         pozicioni: relativ;
         mbushje: 9px 17px 17px 25px;
         diferencë-majtas: 39px;
         kohëzgjatja e tranzicionit: 0,2 sekonda;
         kursori: tregues;
         pesha e shkronjave: e theksuar;
         ngjyra: # 343638;
         }
         .nizualisanelag li: para (
         kufiri: 3px solide transparente;
         lartësia e vijës: 35px;
         pozicioni: absolut;
         maja: 0;
         majtas: -29px;
         gjerësia: 41px;
         rreshtimi i tekstit: qendra;
         madhësia e shkronjave: 14px;
         pesha e shkronjave: e theksuar;
         ngjyra: # 619dce;
         kundër-rritje: li;
         përmbajtja: counter (li);
         kohëzgjatja e tranzicionit: 0,3 sekonda;
         
         madhësia e kutisë: kutia e kufirit;
         }
         .nizualisanelag li: rri pezull: para (
         ngjyra: # 337AB7;
         }
         .nizualisanelag li: pas (
         pozicioni: absolut;
         maja: 0;
         majtas: -29px;
         gjerësia: 41px;
         lartësia: 41px;
         kufiri: 5px solid # 468bd0;
         rrezja kufitare: 50%;
         përmbajtja: "";
         perde: 0,5;
         -përmasat e kuti-faqet e internetit: kuti-kuti;
         -moz-kuti-madhësia: kuti-kuti;
         madhësia e kutisë: kutia e kufirit;
         }
         .nizualisanelag li: rri pezull: pas (
         animacion: 500ms lehtësi-për-larg 0s kërcimIn;
         perde: 1;
         }

         @keyframes bounceIn (
         0% {
         perde: 0;
         shndërroni: shkalla3d (.3, .3, .3);
         }
         20% {
         transformimi: shkalla3d (1.3, 1.3, 1.3);
         }
         40% {
         shndërroj: shkallën3d (.9, .9, .9);
         }
         60% {
         perde: 1;
         shndërroni: scale3d (1.03, 1.03, 1.03);
         }
         80% {
         shndërroni: shkalla3d (.97, .97, .97);
         }
         te (
         perde: 1;
         shndërroni: shkalla3d (1, 1, 1);
         }
         }

         
         Vjen me animacion të 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
         
         
         
         CSS

         Mbushja: 0;
         stili i listës: asnjë;
         }
         .kudezamuden li (
         mbushje: 6px;
         }
         .kudezamuden li: para (
         mbushja djathtas: 11px;
         pesha e shkronjave: e theksuar;
         ngjyra: # 4979a0;
         përmbajtja: "\\ 2606";
         kohëzgjatja e tranzicionit: 0.4 sekonda;
         }
         .kudezamuden li: rri pezull: para (
         ngjyra: # 235e90;
         përmbajtja: "\\ 2605";
         }

         
         Ngjashëm me versionet e mëparshme, vetëm ikona vetë është ndryshuar.

         Në përgjithësi, kjo është një përzgjedhje e vogël e listave, do t'i japë webmasterit një listë të bukur në portal, ku ai vetë mund ta rregullojë atë më shumë, pasi dëshiron ta shohë atë.

         Nëse keni nevojë të vendosni artikuj në një listë të numëruar në vend të një liste me pika, atëherë HTML i porositur do të përdoret këtu. Kjo listë është krijuar duke përdorur etiketën ol. Numërimi fillon nga një dhe rritet me një për secilin artikull të renditur të radhës me një etiketë li.

         Element

         (nga anglisht "lista e parenditur" - "lista e parenditur") krijon një listë të parenditur (pa rregull). Në mënyrë tipike elementi
         përdoret për të krijuar lista të tilla, ku ndryshimi i renditjes së artikujve në këtë listë nuk e ndryshon ndjeshëm kuptimin e listës.

         Etiketoj

         i referohet elementeve të bllokut, kështu që do të marrë të gjithë gjerësinë e disponueshme për të, dhe madhësia e lartësisë do të varet nga sasia e përmbajtjes.

         Artikujt për listat e numëruara përcaktohen duke përdorur etiketën

         • , i cili, përveç tekstit, mund të përfshijë elementë të tjerë HTML (lista, imazhe, tituj, paragrafë, etj.). Si parazgjedhje, listat me bullet shfaqen në një faqe në internet si një listë që fillon me një rreth të vogël të zi. Shfletuesit shtojnë një diferencë të vogël në të majtë kur shfaqin artikujt e listës.

           Shënim:Nëse për të

           zbatohet vetia CSS, pastaj elementet
           • trashëgojnë këto veti.

             Këshilla:Për të ndryshuar llojin e shënuesit, përdorni vetinë CSS të tipit stil-listë ose pronën e figurës së stilit të listës për të zëvendësuar shënuesit me imazhe. Për të krijuar lista të numëruara përdorni etiketën

             .

             Sintaksë

             ...
             • ...
             ...

             Etiketa përfundimtare

             Kërkohet

             Atributet

             kompakt Vlerësohet në HTML5 Zvogëlon dhëmbëzimet dhe hapësirën e vijave. type HTML5 Vendos pamjen e shënuesit të listës.

             Në dispozicion për këtë artikull atributet globale dhe zhvillimet.

             Stilizimi i paracaktuar

             Shumica e shfletuesve do të japin elementin

             me vlerat e paracaktuara CSS të mëposhtme:

             Ul (shfaqja: bllok; tipi i stilit të listës: disk; margin-top: 1em; margin-bottom: 1 em; margin-majtas: 0; margin-right: 0; padding-majtas: 40px;)

             Dallimet midis HTML 4.01 dhe HTML5

             Atributet kompakte dhe të tipit nuk mbështeten në HTML5.

             Shembulli i përdorimit:

             Lista e pa rregulluar HTML:

             Shembull HTML:

             Provojeni vetë
             • Kafe
             • Çaj
             • Kakao

             Specifikimet

             Specifikim	Statusi
             WHATWG Standard Jetësor HTML (WHATWG)	Standardi i jetesës
             HTML 4.01 (W3C)	Rekomandimi
             HTML5 (W3C)	Rekomandimi
             HTML 5.1 (W3C)	Rekomandimi

             Mbështetja e shfletuesit

             Provojeni vetë - Shembuj

             Si ta bëni listën të fillojë me një numër tjetër përveç 1.