Označen i numeriran popis HTML-a

U HTML-u postoje dvije vrste popisa: numerirane i nebrojene. Njihova kreacija je gotovo jednaka. Čak se i oznake razlikuju po jednom znaku. Također možete izraditi popise na više razina, koji mogu uključivati ​​i označene i označene popise.

Ti se popisi mogu pretvoriti po želji. Sve ovisi o vašoj mašti. Prvo ćemo pogledati standardne popise, isto kao u uređivaču Worda, a zatim ćemo ih poboljšati i prepoznati izvan prepoznavanja.

Brojni HTML popis

Redovno brojčano HTML popis mogu se izrađivati ​​pomoću sljedećih oznaka:

  • Prva stavka popisa
  • Druga stavka popisa
  • Treća stavka popisa
  • Jednostavni popisi izgledaju ovako

    numerirani popis html

    Prema standardima, svaka stavka na popisu mora biti unutar oznake otvaranja i zatvaranja. Ali ako ne stavite završnu oznaku, rezultat će biti točno isti. Procesor je vrlo pametan. Tijekom pretvorbe popisa analizira oznake otvaranja. Ako vidi novu

  • , a zatim automatski prije nego što stavi
  • .

    Dakle, popisi mogu biti učinjeni kako je dolje prikazano.

    popis s brojevima

    Ali s gledišta stručnjaka to je netočno.

    Popisi s grafičkim oznakama

    Popisi s grafičkim oznakama

    Unnumbered (ili marker) popisi su stvoreni na isti način, samo umjesto ol tag, ul je napisan.

    U popisi s grafičkim oznakama bez brojeva ili slova - samo različiti simboli, koji se nazivaju markeri.Navedeni popisi primjera

    Multilevel brojčani HTML popis

    Mnogi korisnici zainteresirani su za ovu mogućnost. Stoga valja napomenuti da bilo koji popis s brojevima HTML-a može biti višerazinski. Dodatne razine mogu biti iste ili označene.

    višestruki broj označen popis html

    Da biste stvorili popis naveden u gornjem primjeru, morate napisati sljedeće.

    popis s brojevima prema centru html

    Imajte na umu da se u ovom kodu, za razliku od prvog primjera, dodaje atribut tipa. Zahvaljujući njemu, možete odrediti vrstu razvrstavanja za brojčane i popise oznaka.

    Za numerirane označavamo abecedu ili vrstu znamenki, a za ostale slučajeve - vrstu oznake.

    Popis mogućnosti sortiranja

    Ako koristite posebnu HTML oznaku, popis s brojevima može biti sve što želite.

    Možete odrediti atribut tipa s bilo kojom vrijednošću iz tablice. Ili, u klasi stila css, navedite vrstu popisa stila s željenom vrstom sortiranja.

    Popis mogućnosti sortiranja

    Prijelaz vrijednosti vrlo je jednostavan. Dosta osnovnih znanja engleskog jezika. No, čak i ako ne možete prevesti riječi "krug", "kvadrat" itd., Vizualno možete razumjeti što će biti rezultat kada navedete te vrijednosti u atributu tipa.

    Za brojeve s brojevima morate koristiti sljedeće opcije:

    • 1 - arapski brojevi;
    • A - kapital latino slova;
    • a - mala latino slova;
    • I - rimski kapitalni brojevi;
    • i - mala slova.

    Prema zadanim postavkama, popis s Arapskih znamenki. To jest, ako niste naveli ništa, to je ekvivalent tip = "1".

    Osim toga, popisani brojevi mogu se pokrenuti iz bilo kojeg željenog položaja. Prema zadanim postavkama - izlaz iz 1. Ali ako želite, možete započeti sa najmanje stotinu. Da biste to učinili, morate odrediti početni atribut s bilo kojom vrijednošću.



    promijenite početak popisa na html

    Osim toga, može se zaključiti obrnutim redoslijedom. Da biste to učinili, napišite obrnuto.

    Preokrenuti red u popisima

    Registracija popisa

    Brojni popis HTML-a može biti tako lijepo dizajniran da ne možete odmah pretpostaviti da je to običan popis, a ne slika snimljena u Photoshopu.

    Evo primjera lijepih popisa.

    primjeri lijepih popisa

    Kao što možete vidjeti iz primjera, možete promijeniti izgled brojeva i samih elemenata.

    Možete stvoriti običan popis poput ove.

    popisom HTML-a s brojevima

    U css stilovima, morate odrediti izgled ol tagova. Imajte na umu da se u tom slučaju postavke primjenjuju na sve popise cjelokupne web stranice na kojoj se koristi ovaj stilski list.

    Izrada HTML popisa

    Prvo razmislite o opciji s okruglim popisom. Vratite se na kôd popisa. Postoji popis zaokruženih grupa. To je u ovom razredu potrebno vam je napraviti takvu ljepotu. Možete imenovati klasu prema želji.

    lijep popis s okruglim brojkamastil csscss stil

    Sada razmotrite kvadratni dizajn.

    kvadratni kontrolni popis css

    Stilovi su vrlo slični. Razlika je u tome što je u prvom slučaju element zaokružen pomoću sposobnosti css.

    primjer prekrasnog dizajna css

    primjer lijepe css popisa

    primjer prekrasnog kvadratnog dizajna css

    Podrška pregledniku

    Važno je razumjeti da svi preglednici ne podržavaju sve atribute css.

    Na primjer, želite označiti popis s brojevima. HTML kôd će biti isti, ali rezultat u starijim preglednicima može biti sasvim drugačiji.

    Isto vrijedi i za registraciju numeriranja.

    Potpora pregledniku css

    Kao što vidite, kvadratići oko brojeva u starijim verzijama IE preglednika nisu se pojavili, jer rukovatelj ne zna nove atribute koji omogućuju to.

    Profesionalni web dizajner bi trebao predvidjeti i razumjeti da svi korisnici ne koriste moderne računala. Nije svatko ima Windows 7, 8, 10. Postoji postotak korisnika koji još uvijek sjedaju na sustavu Windows XP i koriste starije verzije preglednika Internet Explorer.

    U pravilu, gotovo sva moderna poboljšanja elemenata dizajna ne podržavaju ih. Korisnik će osjetiti da dizajn sitea uopće ne funkcionira. Da se sve preselilo. Elementi se međusobno isprepliću. Da biste to izbjegli, morate izračunati sve opcije.

    Neki webmasteri im skreću slijepo, jer njihov udio na trenutnom tržištu sve manji i manji. Ali za profesionalce svaki posjetitelj je važan, pogotovo ako je to komercijalno mjesto.

    Učinite nešto prikladno za sve ili razmislite o svim varijantama preglednika.

    Dijelite na društvenim mrežama:

    Povezan
    Kako napraviti padajući popis u HTML-uKako napraviti padajući popis u HTML-u
    Kako stvoriti popis s grafičkim oznakama? Popisi s grafičkim oznakama i brojevimaKako stvoriti popis s grafičkim oznakama? Popisi s grafičkim oznakama i brojevima
    Odaberite tekst. Hrabar tip. HTML priručnik za početnikeOdaberite tekst. Hrabar tip. HTML priručnik za početnike
    Kako napraviti popis na popisu. HTML priručnik za početnikeKako napraviti popis na popisu. HTML priručnik za početnike
    Što je popis za reprodukciju: osnovni pojmovi i vrsteŠto je popis za reprodukciju: osnovni pojmovi i vrste
    Kao što je riječ u abecednom redoslijeduKao što je riječ u abecednom redoslijedu
    Pojedinosti o tome kako poslati popis za reprodukciju prijateljima u `Classmates`Pojedinosti o tome kako poslati popis za reprodukciju prijateljima u `Classmates`
    Kako napraviti popis u Riječi: abecednim redom: savjetiKako napraviti popis u Riječi: abecednim redom: savjeti
    Wish Sheets: kako nadoknaditi, popis želja i daroveWish Sheets: kako nadoknaditi, popis želja i darove
    Obrisan, numeriran, višerazinski popis u programu Word: načini za stvaranjeObrisan, numeriran, višerazinski popis u programu Word: načini za stvaranje
    » » Označen i numeriran popis HTML-a
    LiveInternet