Kako koristiti ul u html-u. Kako postaviti stavke liste horizontalno? Gdje su stilovi liste napisani u Twenty Eleven predlošku

Jezik za označavanje hiperteksta HTML ima oznaku

, koristi se za kreiranje lista sa nabrajanjem. To podržavaju svi moderni pretraživači i omogućava vam da prikažete elemente redosledom koji ne zahteva numerisanje. Na primjer, vrlo često prikazuje stavke menija i sve što se odnosi na liste na stranici: posuđe, proizvode, opremu, alate i još mnogo toga što treba navesti bez navođenja prioriteta određene stavke.

Sintaksa oznake

• Element #1
• Element #2
• Element #3
• ...

Ovaj kod se prevodi u listu s nabrajanjem na web stranici:

• Element #1
• Element #2
• Element #3

Tag

zahtijeva obavezna upotreba zatvaranje oznake
.

Za formiranje elemenata liste koristi se upareni tag. Između početne i završne oznake nalaze se pojedinačne riječi, fraze, paragrafi, slike, dijelovi koda i još mnogo toga što je sadržaj liste sa nabrajanjem.

Šta može biti sadržaj liste sa nabrajanjem?

To može biti različit tekst, uključujući pojedinačne riječi, fraze i pasuse, slike, ugniježđene liste, dijelove php koda i još mnogo toga što je potrebno jednostavno označiti.

Svaka stavka liste uvučena je 40 piksela udesno po defaultu. Koristeći CSS stilovi, možemo promijeniti prikaz ovu listu prema vlastitom nahođenju. Tag

je baziran na blokovima, tako da zauzima čitavo područje koje mu je dostupno, ograničeno ivicom ekrana, okvirom tabele ili drugim elementima stranice.
Dozvoljeni su prilozi liste unutar liste.

Na primjer

• Element #1
• • Stavka #2-1
  • Element #2-2
  • Element #2-3
• Element #3
• ...

Atributi i svojstva oznake

Široko korišten atribut oznake

je atribut tipa koji pokazuje kako će izgledati marker liste. Može uzeti sljedeće vrijednosti

1. type="disc" - marker u obliku popunjenog kruga (ova vrijednost je zadana). Primjer diska je bio malo viši.

2. type="circle" - marker u obliku prozirnog kruga

na primjer:

• Element #1
• Element #2

• Element #1
• Element #2

3. type="square" - marker u obliku kvadrata

na primjer:

• Element #1
• Element #2

A evo kako to izgleda na stranici:

• Element #1
• Element #2
Napomena 1

U CSS-u, tip metka je specificiran pomoću atributa list-style-type:

• ...

Pogledajmo koje vrijednosti list-style-type može imati:

• disk - marker u obliku kruga (primjer je bio iznad)
• krug - marker u obliku prozirnog kruga (primjer je bio iznad)
• kvadrat - marker u obliku kvadrata (primjer je bio iznad)
• decimalni - marker u obliku numerisane liste arapskim brojevima: 1, 2, 3, ...
• decimalna-vodeća-nula - marker u obliku numerisane liste arapskim brojevima sa početnom nulom: 01, 02, 03, ...
• donji rimski - oznaka u obliku numerisane liste na latinskom pismu malim slovima: i, ii, iii, iv, v
• gornji-rimski - oznaka u obliku numerisane liste na latinskom pismu velikim slovima: I, II, III, IV, V
• donja latinica - marker u obliku liste na latiničnoj abecedi malim slovima: a, b, c, d, ...
• gornja latinica - marker u obliku liste latinicom velikim slovima: A, B, C, D, ...
• donji grčki - oznaka u obliku liste na grčkom alfabetu malim slovima
• gornji-grčki - oznaka u obliku liste na grčkom alfabetu velikim slovima
Napomena 2

Atribut se može dodijeliti samoj oznaci

, i oznake
• . Prilikom postavljanja atributa oznaci
  sve stavke liste će biti prikazane kako je naznačeno atributom. Ali možemo ovom ili onom elementu dati svoj vlastiti prikaz. Primjer na slici:

  Kod izgleda ovako:

  • Element #1
  • Element #2
  • Element #3

  • Element #1
  • Element #2
  • Element #3

  Promjena oznaka oznaka

  koristeći CSS

  Stavke liste za nabrajanje kreirane pomoću oznake

  , može se označiti proizvoljnim slikama. CSS se koristi za promjenu tipa markera. Na primjer

  • Element #1
  • Element #2
  • Element #3

  A ovako to izgleda na stranici:

  • Element #1
  • Element #2
  • Element #3

  C koristeći CSS možemo podesiti druge vrste prikaza markera. Ali morate to zapamtiti kada specificirate bilo koji stil za oznaku

  , odnosi se na sve elemente liste.
  Ako odlučite promijeniti standardne ul i li liste, onda će vam ova tema biti zanimljiva. Jer ovdje ćete naučiti nekoliko originalna rješenja. Što će vam sigurno pomoći da promijenite standardni izgled u jedinstveni, gdje se koristi CSS stil, za dizajn lista. Prednost je što ćemo koristiti samo jednu klasu u cijeloj, što će radikalno promijeniti izgled. Pored ovih parametara, možete odrediti s kojim brojem bi lista trebala početi, ovdje sve možete učiniti sami. Zadana početna vrijednost za numerirane liste je na prvom ili slovu A.

  S obzirom na to da su osnove na putu, sada ćemo detaljnije pogledati elemente koji se koriste za pružanje strukture i značenja različitim dijelovima dizajna. Ako neko ne zna, ul i li su mnogo bolja opcija od običnog teksta jer kada je tekst premotan, posebno u mobilni telefon, savršeno se uvlači i ne omotava se oko markera.

  Liste se smatraju odličnim načinom za predstavljanje informacija na stranicama jer se lako čitaju i dobro izgledaju. Čini se da mnogi ljudi misle da su tačkice male slike, ali u stvari su sve kreirane putem prilično jednostavnog HTML koda. Možete ugraditi različite vrste liste jedna u drugu ako želite, samo zapamtite da ih pravilno zatvorite. Možete se igrati sa tekstom koji želite u svim ovim komandama liste.

  Također morate znati da liste u početku sadrže nekoliko elemenata:

  1 . Neorganizovane informacije.
  2 . Organizirane informacije.
  3 . Definicije.

  Počnimo sa instalacijom:

  1. Opcija:

  
  
  • Stavka liste
  
  
  • Jedinstvena lista
  
  
  • Originalne liste
  
  
  • ZORNET.RU - Webmaster
  
  
  • Druga lista
  
  
  
  CSS

  Ksangelopan (
  margina: 19px 0 0;
  padding:0;
  stil liste: nijedan;
  poništavanje brojača: li;
  }
  .ksangelopan li (
  granica: 2px čvrsta #3575ad;
  pozadina: #d7dee4;
  položaj: relativan;
  margin-bottom: 17px;
  padding: 15px 9px;
  }
  .ksangelopan li:hover (
  z-indeks: 1;
  }
  .ksangelopan li:prije (
  granica: 2px čvrsta #2270b3;
  pozicija: apsolutna;
  vrh: -14px;
  padding: 3px 9px;
  veličina fonta: 11px;
  font-weight: bold;
  boja: #246eaf;
  pozadina: #f2f4f7;
  kontrainkrement: li;
  sadržaj: counter(li);
  -webkit-transition-duration: 0.4s;
  trajanje tranzicije: 0.4s;
  }
  .ksangelopan li:hover:prije (
  pozadina: #2672b3;
  boja: #f7f9fb;
  -webkit-transform: translate(-11px, 0);
  -ms-transform: translate(-11px, 0);
  -o-transform: translate(-11px, 0);
  transform: translate(-11px, 0);
  }
  .ksangelopan li:after (
  sadržaj: "";
  pozicija: apsolutna;
  trajanje tranzicije: 0.3s;
  -webkit-transition-property: širina;
  svojstvo prijelaza: širina;
  z-indeks: -1;
  pozadina: #FFF;
  visina: 100%;
  lijevo: 0;
  vrh: 0;
  širina: 0;
  }
  .ksangelopan li:hover:after (
  širina: 100%;
  }

  
  To je sve za instalaciju.

  2 Druga opcija:

  

  
  
  • Stavka liste
  
  
  • Jedinstvena lista
  
  
  • Originalne liste
  
  
  • ZORNET.RU - Webmaster
  
  
  • Druga lista
  
  
  
  CSS

  Beleduzlopamges (
  margin-bottom: 8px;
  padding:0;
  stil liste: nijedan;
  poništavanje brojača: li;
  }
  .beleduzlopamges li (
  položaj: relativan;
  granica: 2px čvrsta #195588;
  pozadina: #eff3f7;
  padding: 15px 19px 15px 27px;
  margina: 12px 0 12px 40px;
  -webkit-transition-duration: 0.3s;
  trajanje tranzicije: 0.3s;
  }
  .beleduzlopamges li:hover (
  pozadina: #FFF;
  }
  .beleduzlopamges li:before (
  visina linije: 32px;
  pozicija: apsolutna;
  vrh: 4px;
  lijevo: -39px;
  širina: 39px;
  text-align: centar;
  veličina fonta: 16px;
  font-weight: bold;
  boja: #f9f5f5;
  pozadina: #275b88;
  kontrainkrement: li;
  sadržaj: counter(li);
  tranzicija-trajanje: 0.2s;
  }
  .beleduzlopamges li:hover:before (
  širina:46px;
  }
  .beleduzlopamges li:after (
  pozicija: apsolutna;
  lijevo: 0;
  vrh: 4px;
  sadržaj: "";
  visina: 0;
  širina: 0;
  ivica: 16px čvrsta prozirna;
  border-left-color: #275b88;
  -webkit-transition-duration: 0.2s;
  tranzicija-trajanje: 0.2s;
  }
  .beleduzlopamges li:hover:after (
  margin-left: 6px;
  }

  
  Možete samostalno postaviti središnju gamu koja odgovara glavnom stilu stranice.

  3 Treća opcija:

  

  
  
  • Skripte za uCoz
  
  
  • Predlošci za uCoz
  
  
  • Dizajn web stranice
  
  
  • Stilovi web stranica
  
  
  • Stiliziranje sa CSS-om
  
  
  
  CSS

  Nizualisanelag (
  padding:0;
  stil liste: nijedan;
  poništavanje brojača: li;
  }
  .nizualisanelag li (
  položaj: relativan;
  padding: 9px 17px 17px 25px;
  margin-left: 39px;
  tranzicija-trajanje: 0.2s;
  kursor: pokazivač;
  font-weight: bold;
  boja: #343638;
  }
  .nizualisanelag li:before (
  ivica: 3px čvrsta prozirna;
  visina linije: 35px;
  pozicija: apsolutna;
  vrh: 0;
  lijevo:-29px;
  širina:41px;
  text-align:center;
  veličina fonta: 14px;
  font-weight: bold;
  boja: #619dce;
  kontrainkrement: li;
  sadržaj: counter(li);
  trajanje tranzicije: 0.3s;
  
  box-size: border-box;
  }
  .nizualisanelag li:hover:before (
  boja: #337AB7;
  }
  .nizualisanelag li:after (
  pozicija: apsolutna;
  vrh: 0;
  lijevo: -29px;
  širina: 41px;
  visina: 41px;
  granica: 5px čvrsta #468bd0;
  radijus granice: 50%;
  sadržaj: "";
  neprozirnost: 0,5;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-size: border-box;
  }
  .nizualisanelag li:hover:after (
  animacija: 500ms ease-in-out 0s bounceIn;
  neprozirnost: 1;
  }

  @keyframes bounceIn (
  0% {
  neprozirnost: 0;
  transformacija: scale3d(.3, .3, .3);
  }
  20% {
  transformacija: scale3d(1.3, 1.3, 1.3);
  }
  40% {
  transformacija: scale3d(.9, .9, .9);
  }
  60% {
  neprozirnost: 1;
  transformacija: scale3d(1.03, 1.03, 1.03);
  }
  80% {
  transformacija: scale3d(.97, .97, .97);
  }
  do (
  neprozirnost: 1;
  transformacija: scale3d(1, 1, 1);
  }
  }

  
  Dolazi sa predivnom animacijom.

  4 Četvrta opcija:

  

  
  
  • Prvi element za sajt
  
  
  • Drugi element za sajt
  
  
  • Treći element za sajt
  
  
  • Četvrti element za sajt
  
  
  • Peti element za sajt
  
  
  
  CSS

  Padding:0;
  stil liste: nijedan;
  }
  .kudezamuden li(
  padding:6px;
  }
  .kudezamuden li:prije (
  padding-right: 11px;
  font-weight: bold;
  boja: #4979a0;
  sadržaj: "\2606";
  trajanje tranzicije: 0.4s;
  }
  .kudezamuden li:hover:before (
  boja: #235e90;
  sadržaj: "\2605";
  }

  
  Slično prethodne verzije, samo je sama ikona promijenjena.

  Općenito, ovo je mali izbor lista koje web master može napraviti lijepa lista na portalu, gde on sam može da ga dizajnira više, kako on sam želi da ga vidi.

  Ako treba da stavite stavke u numerisanu listu umesto u označenu, tada će se koristiti uređeni HTML. Ova lista je kreirana pomoću oznake ol. Numeracija počinje od jedan i povećava se za jedan za svaki sljedeći uređeni element liste s oznakom li.

  Jedina razlika je u tome što je ova oznaka striktno napravljena za liste numeracije. Naziv oznake dolazi od engleske skraćenice "Ordered List" - numerisana lista.

  Sintaksa oznake

  1. Element #1
  2. Element #2
  3. Element #3
  4. ...

  Gdje atribut type="value" može imati sljedeće vrijednosti

  • A - postavlja markere u obliku velikih latiničnih slova (A, B, C..);
  • a - postavlja markere u obliku malih latiničnih slova (a, b, c..);
  • I - postavlja markere u obliku velikih rimskih brojeva (I, II, III, IV..);
  • i - postavlja markere u obliku malih rimskih brojeva (i, ii, iii, iv..);
  • 1 (podrazumevano) - postavlja markere u obliku arapskih brojeva (1, 2, 3..);

  Atribut start="value" specificira početnu vrijednost (početnu vrijednost) izvještaja.

  Obrnuti atribut specificira obrnuto brojanje (ako je potrebno).

  Tag

  zahtijeva obaveznu upotrebu završne oznake

  Za formiranje elemenata liste koristi se upareni tag

  • . Između početne i završne oznake nalaze se pojedinačne riječi, fraze, paragrafi, slike, dijelovi koda i još mnogo toga što je sadržaj liste sa nabrajanjem.

    Napomena

    Unutar liste možete promijeniti račun u svoj. U tu svrhu postoji poseban atribut value="" na oznaci.

  • , koji je dodijeljen nekim numerička vrijednost. Na primjer

    1. Element #1
    10. Element #2
    11. Element #3

  Primjeri sa numerisanim listama u html-u (

  )

  Primjer 1. HTML numerirana lista latiničnim slovima

  Primjer sa velikim slovima

  1. Element #1
  2. Element #2
  3. Element #3

  1. Element #1
  2. Element #2
  3. Element #3

  Primjer sa malim slovima

  1. Element #10
  2. Element #11
  3. Element #12

  Ovako to izgleda na stranici:

  1. Element #1
  2. Element #2
  3. Element #3

  Primjer 2. HTML numerirana lista rimskim slovima

  Primjer sa velikim slovima

  1. Element #1
  2. Element #2
  3. Element #3

  Ovako to izgleda na stranici:

  1. Element #1
  2. Element #2
  3. Element #3

  Primjer sa malim slovima

  1. Element #1
  2. Element #2
  3. Element #3

  Ovako to izgleda na stranici:

  1. Element #1
  2. Element #2
  3. Element #3

  Primjer 3. Numerirana lista html različita početna pozicija

  Primjer koji pokazuje mogućnosti start atributa, koji vam omogućava da postavite početnu vrijednost brojača.

  50. Element #1
  51. Element #2
  52. Element #3

  Ovako to izgleda na stranici:

  1. Element #1
  2. Element #2
  3. Element #3

  Primjer 4. Promjena broja u html numerisanim listama

  Ispod je primjer s mogućnošću promjene vrijednosti brojača pomoću atributa value kada se prikazuju novi elementi u oznakama

  • .

    10. Element #1
    11. Element #2
    100. Element #3
    101. Element #4

    Ovako to izgleda na stranici:

    1. Element #1
    2. Element #2
    3. Element #3
    4. Element #4

    Primjer 5. Obrnuta numerirana lista u html-u

    Ispod je primjer obrnute numerirane liste (brojeći obrnutim redoslijedom).

    10. Element #1
    11. Element #2
    12. Element #3
    13. Element #4

    Ovako to izgleda na stranici:

    1. Element #1
    2. Element #2
    3. Element #3
    4. Element #4

    Element

    (od engleskog “unordered list”) kreira listu sa nabrajanjem (neuređenu). Tipično, element
    koristi se za kreiranje lista gde promena redosleda stavki na ovoj listi ne menja značajno značenje liste.

    Tag

    odnosi se na blok elemente, tako da će zauzeti cijelu širinu koja mu je dostupna, a veličina visine ovisi o količini sadržaja.

    Stavke za numerisane liste su definisane pomoću oznake

    • , koji pored teksta može uključivati ​​i druge HTML elemente (liste, slike, naslovi, pasuse, itd.). Podrazumevano, bulleted liste su prikazani na web stranici kao lista koja počinje malim crnim krugom. Pretraživači dodaju malu marginu lijevo kada prikazuju stavke liste.

      Napomena: Ako da

      primjenjuje CSS svojstvo, zatim elementi
      • naslijediti ova svojstva.

        savjet: Da biste promijenili tip markera, koristite CSS svojstvo list-style-type ili list-style-image svojstvo, koje vam omogućava zamjenu markera slikama. Za kreiranje numerisanih lista koristite oznaku

        .

        Sintaksa

        ...
        • ...
        ...

        Oznaka za zatvaranje

        Obavezno.

        Atributi

        compactDeprecated u HTML5 Smanjuje uvlačenje i razmak između redova. type HTML5 Postavlja tip markera liste.

        Dostupno za ovaj artikal globalni atributi I događaji.

        Zadani stil

        Većina pretraživača će prikazati element

        sa sljedećim CSS vrijednosti zadano:

        Ul (prikaz: blok; tip-stil liste: disk; margina-vrh: 1em; margin-dno: 1 em; margina-lijevo: 0; margin-desno: 0; padding-lijevo: 40px; )

        Razlike između HTML 4.01 i HTML5

        Atributi compact i type nisu podržani u HTML5.

        Primjer upotrebe:

        Neuređena HTML lista:

        Primjer HTML-a:

        Probajte sami
        • Kafa
        • Tea
        • Kakao

        Specifikacije

        Specifikacija	Status
        WHATWG HTML životni standard (WHATWG)	Životni standard
        HTML 4.01 (W3C)	Preporuka
        HTML5 (W3C)	Preporuka
        HTML 5.1 (W3C)	Preporuka

        Podrška za pretraživač

        Probajte sami - primjeri

        Kako mogu učiniti da lista počinje brojem koji nije 1?

        Nastavimo naše razgovore o počecima html-a. U ovom članku želim govoriti o tome kako kreirati pasuse, liste i naslove u tekstu. I takođe o pojedinačnim oznakama
        I

        ---

        .

        Preporučujem vam da pročitate prvu lekciju u ovoj seriji, kao i uvodni članak o početku učenja html-a za one koji ih još nisu upoznati.

        Sada ćemo nastaviti proučavanje oznaka. Pretpostavljam da je čitalac već upoznat sa materijalom u gornjim člancima.

        Kao i uvek, plan rada:

        1. Paragrafi
        2. Prelomi linija
           
        3. Liste i elementi liste
        4. Naslovi
        5. Horizontalni lenjiri

           ---

        Paragrafi

        Tekst se gotovo uvijek sastoji od pasusa. Paragraf je element teksta koji prenosi potpunu misao.

        U html-u, pasus, kao što se vidi iz naslova, označava se sa . Slovo "p" je preuzeto od riječi "paragraph", što samo znači "paragraf".

        Pogledajmo primjer:

        Tekst prvog pasusa. Sadrži misao. Ali sada je ta misao gotova.
        

        
        

        Još jedna misao je već počela i pišemo je u drugom pasusu.
        

        Kao što vidite, upotreba pasusa je vrlo jednostavna i ne zahtijeva nikakve posebne komentare. Ako pogledamo ovaj kod u pretraživaču, vidjet ćemo dva reda sa jednim praznim redom između njih. U ruskim tekstovima uobičajeno je odvojiti pasus ne praznim redom, već pomicanjem prvog reda udesno. Ali upravo se to formatiranje često koristi na Internetu, pa se često ostavlja u tekstovima na ruskom jeziku. Međutim, ako vam se ne sviđa ovo ponašanje, možete ga promijeniti pomoću CSS-a.

        Prelomi linija
        

        Ponekad trebate prevesti red bez završetka misli ili zatvaranja pasusa. To jest, samo idite na novu liniju. Za ovo postoji jedna oznaka
        . Evo primjera njegove upotrebe:

        Vetar veselo duva
        
        I čamac ubrzava
        
        Trči u talasima
        Sa podignutim jedrima.
        

        Ovaj fragment pjesme A.S. Puškin nam je pomogao da ilustrujemo radnju oznake
        . Posebno sam stavio posljednja dva reda ovog katrena u jedan red koda kako bih pokazao da se redovi prenose u novi red ne zato što smo postavili prijelome reda, već zato što smo postavili oznake
        . Ova oznaka je vrlo jednostavna i ne treba joj detaljno objašnjenje, pa ćemo ovdje prestati raspravljati o njoj.

        liste,

        i elemente liste

        Ponekad je potrebno nešto navesti u tekstu. U tu svrhu koriste se tri oznake: ul, ol, li. Sve ove oznake su oznake kontejnera, ali oznaka je uvijek sadržana u jednom od ili kontejnera i nema značenje izvan njih. Kontejner ul se koristi kada nam nije stalo do redosleda navedenih stavki i ne želimo da se fokusiramo na redosled kojim se pojavljuju. Oznaka ol, naprotiv, fokusira pažnju na slijed elemenata, automatski numerirajući svaki red. Pogledajmo primjer:

        
        
        • Bun
        
        
        • Pita
        
        
        • Loaf
        
        
        • Pita
        
        

        Na ekranu pretraživača ovaj kod će izgledati ovako:

        • Bun
        • Pita
        • Loaf
        • Pita

        Ako jednostavno zamijenimo oznaku ul sa oznakom ol, dobićemo numerisanu listu:

        
        
        1. Bun
        
        
        2. Pita
        
        
        3. Loaf
        
        
        4. Pita
        
        

        Sada to izgleda ovako:

        1. Bun
        2. Pita
        3. Loaf
        4. Pita

        Niko ne zabranjuje ugniježđenje jedne liste u drugu, formiranje ugniježđenih lista sa podlistama:

        
        Alati:
        
        • Saw
        
        
        • Odvijači
          
          
          
          1. Pravo
          
          
          2. Cross
          
          
          
          
        
        
        • Bušilica
        
        

        Morate malo eksperimentirati s ovim listama da biste se navikli na njihovu upotrebu. Postoji još jedna vrsta liste, ali se rijetko koristi, pa neću sada o njoj. Možda u drugom članku.

        Naravno, kao i sve ostalo, izgled Ovi elementi se mogu modificirati do neprepoznatljivosti pomoću CSS-a.

        Naslovi

        Naravno, paragrafi pomažu u strukturiranju dokumenata. Ali kako biste veliki tekst razbili na manje logične dijelove, možete nasloviti svaki od njih. Svaki dio može sadržavati daljnje poddijelove, s vlastitim naslovima nižeg nivoa, itd. Za postavljanje naslova koristite oznake , gdje je “x” broj od 1 do 6. Što je veći broj, to je niži naslov. Odnosno, naslov najvišeg nivoa će se zvati h1, a naslov donjeg nivoa će se zvati h6. Podrazumevano, tekst u ovim naslovima se prikazuje velikim fontom i uvučen. Ovaj tekst se prikazuje na cijelom redu, odnosno hx oznake su blok oznake. Oznaka h1 ima najveći font, a oznaka h6 ima najmanji font. Po pravilu, na stranici se nalazi jedna, maksimalno dva h1 tagova najvišeg nivoa. Kako se nivo smanjuje, broj oznaka se povećava. Ali rijetko je da će webmaster moći toliko razbiti tekst da mu trebaju naslovi 5 ili 6 nivoa. Čak se i nivo 4 rijetko koristi.

        Manje riječi, više akcije!