Na osnovu osnova, sada ćemo detaljnije pogledati elemente koji se koriste za pružanje strukture i značenja različitim dijelovima dizajn. Ako neko ne zna, onda ul i li, ovo je mnogo najbolji način nego jednostavno tekstualni tekst jer kada je tekst umotan, posebno u mobilni telefon, savršeno se uvlači i ne omotava se oko markera.
Vjeruje se da liste jesu odličan način predstavljanje informacija na stranicama jer se lako čitaju i izgledaju dobro. Čini se da mnogi ljudi misle da su bullet point male slike, ali u stvarnosti se sve više stvaraju jednostavan HTML kod. Možete umetnuti 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
... Neuređene informacije.
2
... Naručene informacije.
3
... Definicije.
Početak instalacije:
1. Opcija:
- Stavka liste
- Jedinstvena lista
- Original Lists
- ZORNET.RU - Za webmastere
- 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: lebdjeti (
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: brojač (li);
-webkit-transition-duration: 0.4s;
tranzicija-trajanje: 0.4s;
}
.ksangelopan li: lebdjeti: prije (
pozadina: # 2672b3;
boja: # f7f9fb;
-webkit-transform: prevesti (-11px, 0);
-ms-transform: prevesti (-11px, 0);
-o-transform: prevesti (-11px, 0);
transform: translate (-11px, 0);
}
.ksangelopan li: poslije (
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: lebdjeti: nakon (
širina: 100%;
}
Ovo je cijela instalacija.
2 Druga opcija:
- Stavka liste
- Jedinstvena lista
- Original Lists
- ZORNET.RU - Za webmastere
- 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: lebdjeti (
pozadina: #FFF;
}
.beleduzlopamges li: prije (
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: brojač (li);
tranzicija-trajanje: 0.2s;
}
.beleduzlopamges li: lebdjeti: prije (
širina: 46px;
}
.beleduzlopamges li: nakon (
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: nakon (
margin-left: 6px;
}
Središnja skala se može nezavisno postaviti tako da odgovara glavnom stilu lokacije.
3 Treća opcija:
- Skripte za uCoz
- Šabloni za uCoz
- Dizajn web stranice
- Stilovi za sajt
- CSS stil
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: prije (
ivica: 3px čvrsta prozirna;
visina linije: 35px;
pozicija: apsolutna;
vrh: 0;
lijevo: -29px;
širina: 41px;
text-align: centar;
veličina fonta: 14px;
font-weight: bold;
boja: # 619dce;
kontrainkrement: li;
sadržaj: brojač (li);
trajanje tranzicije: 0.3s;
box-size: border-box;
}
.nizualisanelag li: lebdjeti: prije (
boja: # 337AB7;
}
.nizualisanelag li: nakon (
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: lebdjeti: nakon (
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 predivna animacija.
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";
tranzicija-trajanje: 0.4s;
}
.kudezamuden li: lebdjeti: prije (
boja: # 235e90;
sadržaj: "\ 2605";
}
Slično je prethodne verzije, samo se sama ikona mijenja.
U principu jeste mali izbor liste, će dati webmasteru da napravi prekrasnu listu na portalu, gdje je on sam može urediti više, kako želi da je vidi.
Ako treba da stavite stavke u numerisanu listu umesto u listu sa nabrajanjem, onda će se ovde koristiti uređeni HTML. Ova lista je kreirana pomoću oznake ol. Numeracija počinje od jedan i povećava se za jedan za svaku narednu stavku liste sa oznakom li.
Lista za nabrajanje se definiše dodavanjem malog znaka ispred svake stavke liste, obično popunjenog kruga. Sama lista se formira pomoću kontejnera
- , a svaka stavka liste počinje oznakom
- kao što je prikazano ispod.
- Prva tačka
- Druga tačka
- Treća tačka
Završna oznaka mora biti prisutna na listi.
Primjer 11.1 pruža HTML za dodavanje liste s nabrajanjem na web stranicu.
Primjer 11.1. Napravite listu sa nabrajanjem
- Cheburashka
- Krokodil Gena
- Shapoklyak
- Rat Larissa
Rezultat ovaj primjer prikazano na sl. 11.1.
Rice. 11.1. Prikaz liste sa oznakama
Obratite pažnju na padding na vrhu, dnu i lijevo od liste. Takve uvlake se dodaju automatski.
Markeri mogu biti tri tipa: krug (podrazumevano), krug i kvadrat. Atribut tipa oznake koristi se za odabir stila markera.
-
. Važeće vrijednosti date su u tabeli. 11.1
- Prvo
- Sekunda
- Treće
- Prvo
- Sekunda
- Treće
- Prvo
- Sekunda
- Treće
- promjena vjerskih uvjerenja (opcionalno: budizam, konfucijanizam, hinduizam). Specijalna ponuda- Judaizam i islam zajedno;
- promjena vjerovanja u nepogrešivost voljene strane;
- vjerovanje da vanzemaljci postoje;
- preferencija političkog sistema kao najboljeg svoje vrste (fakultativno: feudalizam, socijalizam, komunizam, kapitalizam).
- Stavka #1
- Stavka #2
- Stavka #3
- ...
- Stavka #1
- Stavka #2
- Stavka #3
- Stavka #1
-
- Stavka # 2-1
- Stavka # 2-2
- Stavka # 2-3
- Stavka #3
- ...
- Stavka #1
- Stavka #2
- Stavka #1
- Stavka #2
- Stavka #1
- Stavka #2
- Stavka #1
- Stavka #2
- ...
- 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-početna-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 - metak u obliku numerisane liste na latinskom pismu velikim slovima: I, II, III, IV, V
- donja latinica - oznaka liste latinica 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
- ... Prilikom postavljanja atributa oznaci
- sve stavke liste će biti prikazane kako atribut ukazuje. Ali možemo jednom ili drugom elementu dati svoj vlastiti prikaz. Primjer na slici:
- Stavka #1
- Stavka #2
- Stavka #3
- Stavka #1
- Stavka #2
- Stavka #3
- Stavka #1
- Stavka #2
- Stavka #3
- Stavka #1
- Stavka #2
- Stavka #3
- obeleženo markerom,
numerisana lista —- - svaki element liste
- označeno brojem,
lista definicija- - sastoji se od parova pojmova- —
- definicija.
Svaka lista je kontejner koji sadrži stavke liste ili parove termin-definicije. Stavke liste se ponašaju kao blok elementi, koji se nalaze jedan ispod drugog i zauzimaju cijelu širinu kontejnerskog bloka. Svaka stavka liste ima dodatni okvir sa strane koji ne učestvuje u izgledu.
Generisanje HTML lista
1. Označena lista
Označena lista je neuređena lista (sa engleske nesređene liste)... Created with uparena oznaka
... Marker stavke liste je oznaka, na primjer, popunjeni krug.Preglednici prema zadanim postavkama dodaju sljedeće formatiranje u okvir sa listom:
Svaka stavka liste kreira se pomoću oznake para
- (sa engleske stavke liste).
- dostupan.
- Microsoft
- Apple
2. Numerisana lista
Numerisana lista se kreira pomoću uparene oznake. Svaka stavka liste se također kreira pomoću elementa
- označeno brojem,
- ... Pretraživač automatski numeriše elemente redom, a ako izbrišete jedan ili više elemenata takve liste, onda će se ostali brojevi automatski ponovo izračunati.
Okvir sa listom takođe ima podrazumevane stilove pretraživača:
- dostupan je atribut value, koji vam omogućava da promijenite zadani broj za odabranu stavku liste. Na primjer, ako za prvu stavku na listi koju postavite
- , tada će se ostatak numeracije ponovo izračunati u odnosu na novu vrijednost.
Za oznaku
- dostupni su sljedeći atributi:
- Microsoft
- Apple
- i
- dostupan.
- Direktor:
- Petr Tochilin
- Uloge:
- Andrey Gaidulyan
- Aleksej Gavrilov
- Vitalij Gogunski
- Marija Koževnikova
Rice. 3. Lista definicija4. Ugniježđena lista
Često prilike jednostavne liste nije dovoljno, na primjer, kada kreirate sadržaj, ne možete bez ugniježđene stavke... Oznake za ugniježđenu listu bi bile sljedeće:
- Stav 1.
- Tačka 2.
- Podtačka 2.1.
- Podtačka 2.2.
- Podtačka 2.2.1.
- Podtačka 2.2.2.
- Podtačka 2.3.
- Tačka 3.
Rice. 4. Ugniježđena lista5. Višeslojna numerisana lista
Lista na više nivoa se koristi za prikaz stavki liste na različitim nivoima sa različitim uvlakama. Oznake za višeslojnu numerisanu listu bi bile sljedeće:
- stav
- stav
- stav
- stav
- stav
- stav
- stav
- stav
- stav
- stav
- stav
Ova zadana oznaka će kreirati novu numeraciju zasnovanu na jednom za svaku ugniježđenu listu. Da biste ugnijezdili numeraciju, trebate koristiti sljedeća svojstva:
reset brojača resetuje jedan ili više brojača, postavljajući vrednost za resetovanje;
counter-increment specificira vrijednost inkrementa brojača, tj. kojim korakom će svaka naredna stavka biti numerisana;
content - generisani sadržaj, u u ovom slučaju je odgovoran za prikaz broja ispred svake stavke na listi.Ol (/ * uklonite standardnu numeraciju * / stil liste: nema; / * Identifikujte brojač i dajte mu ime li. Vrednost brojača nije navedena - podrazumevano je 0 * / poništavanje brojača: li;) li : before (/ * Definiramo element koji treba numerirati - li. Pseudoelement before specificira da će se sadržaj umetnut korištenjem svojstva sadržaja pojaviti prije stavki liste. Ovo je također vrijednost povećanja brojača (podrazumevano je 1). * / Inkrement brojača: li; / * Svojstvo sadržaja prikazuje broj brojača stavki liste () znači da je generirani tekst vrijednost svih brojača s tim imenom. Tačka u navodnicima dodaje tačku odvajanja između brojeva i tačku sa razmakom se dodaje ispred sadržaja svake stavke liste * / sadržaj: brojači (li, ".") ".";)
Rice. 5. Višeslojna numerisana lista
Tabela 1. Atributi oznake
Atribut Opis, prihvaćena vrijednost obrnuto Obrnuti atribut specificira prikaz liste u obrnutim redosledom(na primjer, 9, 8, 7 ...). start Atribut start specificira početna vrijednost, od kojeg će početi numeriranje, na primjer, konstrukcija - prva stavka će se dodijeliti serijski broj"deset". Istodobno možete postaviti i vrstu numeracije, npr.
- .
tip Atribut type specificira vrstu markera koji će se koristiti na listi (kao slova ili brojevi). Prihvaćene vrijednosti:
1 - zadana vrijednost, decimalna numeracija.
A - numerisanje liste u abecedni red, velika slova (A, B, C, D).
a - numerisanje liste po abecednom redu, mala slova(a b c d).
I - numeracija rimskim velikim brojevima (I, II, III, IV).
i - numerisanje rimskim malim ciframa (i, ii, iii, iv).3. Lista definicija
Liste definicija kreiraju se pomoću oznake
Okvir sa listom definicija ima sljedeće zadane stilove pretraživača:
Za oznake
- ,
- ,
-
Podrazumevano, stavke liste su numerisane pretraživačem redom, počevši od jedan. Ako želite da započnete numerisanje sa ne-jedan, tada se koristi atribut start, koji specificira broj od kojeg će numerisana lista početi. Atribut prihvaća cijele brojeve kao vrijednost. Takođe možete obrnuti redosled numerisanja. To radi obrnuti atribut, koji se koristi bez vrijednosti. Atribut uveden u HTML 5 i radi u svim pretraživačima osim IE.
Također je moguće podesiti pogled bullet numerisana lista... Za to se koristi atribut tipa, koji može poprimiti vrijednosti "A | a | I | i | 1", što, respektivno, znači:
- velika slova pisma,
- mala latinična slova,
- veliki rimski brojevi,
- mali rimski brojevi,
- arapski brojevi.
Budući da se sve navedene vrijednosti, a i ne samo, mogu lako postaviti putem CSS stilova, korištenjem atribut tipa, po mišljenju autora, nije preporučljivo, iako je dozvoljeno u HTML 5.
Upotreba numerisane liste je prikazana u primeru 2.10.
Numerisana lista Proljetni mjeseci po redu:- mart
- april
- maja
- avgust
- jula
- juna
Primjer 2.10. Korištenje "ol" elementa
Inače, pretraživači prikazuju sve liste kao blok elemente, tako da su pri prikazivanju primjera jasno vidljivi vertikalni padding... Pokušajte sami upisati kod, dajte listama žutu pozadinu i pogledajte rezultat.
Liste sa nabrajanjem. Oznake
- i
- ,
Označena lista formiran uparenom oznakom
- (sa engleskog. neuređena lista). Sam element "ul" se koristi kao kontejner za stavke liste, koje se formiraju, kao u slučaju numerisanih lista, uparuju oznake
- i nalaze se jedan za drugim.
Liste za nabrajanje koriste zaokružene oznake umjesto brojeva i slova. Možete promijeniti izgled markera koristeći CSS stilove. Što se tiče atributa tipa, on je uklonjen u HTML 5. Dakle, ostali su samo generički atributi i atributi događaja.
Označena lista proljetni mjeseci:- mart
- april
- maja
Primjer 2.11. Korištenje elementa "ul".
Liste definicija. Oznake
- ,
- ,
Lista definicija formiran uparenom oznakom
- (sa engleskog. lista definicija). Sam element "dl" se koristi kao kontejner za stavke liste. Svaka takva stavka se zauzvrat sastoji od elemenata "dt" (od engleskog. definicija termina) i "dd" (iz engleskog. opis definicije), formirane, respektivno, od uparenih oznaka
- i
- ... Prvi sadrži pojam koji se definiše, a drugi sadrži definiciju pojma.
Pogledajmo primjer 2.12 radi jasnoće.
Lista definicija - Html
- Standardni jezik za označavanje hiperteksta za web dokumente,
koji je sveprisutan na World Wide Webu. - CSS
- Formalni jezik za opisivanje spoljašnjeg vrsta dokumenta,
napisano korišćenjem jezika za označavanje.
Primjer 2.12. Korištenje "dl" elementa
Ugniježđene liste
Ponekad je potrebno stvoriti ugniježđene liste, koje su liste smještene u točkama eksterna lista... Razmotrimo kreiranje ugniježđenih lista na primjeru 2.13.
Ugniježđene liste - Tri sorte jabuka:
- Antonovka,
- Strefel,
- Kuban.
- Tri vrste krušaka:
- Chizhovskaya,
- Williams,
- Vojvotkinjo.
Primjer 2.13. Korištenje ugniježđenih lista
Kao što vidite, kreiranje ugniježđenih lista nije nimalo teško. Da biste to učinili, morate pažljivo proći između početne oznake
- i završnu oznaku
za numerisane i označene liste, postavite ugniježđenu listu potrebnog tipa. Za liste definicija, ugniježđenu listu treba postaviti između početne oznake- i završnu oznaku
... Ovo može biti potrebno, na primjer, ako trebate dati termin nekoliko definicija.Brzi skok na druge stranice
- Kreiranje lista u HTML-u. Oznake
- ,
- ,
- ,
- ,
- ,
- ,
Kod izgleda ovako:
Promjena oznaka oznaka
- koristeći CSS
Stavke na listi sa nabrajanjem koje je kreirala oznaka
- , može se označiti proizvoljnim slikama. CSS se koristi za promjenu tipa markera. Na primjer
A ovako to izgleda na stranici:
C koristeći CSS možemo definisati druge tipove prikaza markera. Ali morate to zapamtiti kada postavljate bilo koji stil za oznaku
- , odnosi se na sve elemente liste.
HTML liste koriste se za grupisanje povezanih informacija. Postoje tri vrste lista:
bulleted list —
- - svaki element liste
Numerisane liste. Oznake
- i
HTML 5 koristi tri vrste lista: numerisane liste, liste sa nabrajanjem i liste definicija.
Numerisana lista formiran uparenom oznakom
- (sa engleskog. naručena lista). Sam element "ol" se koristi kao kontejner za stavke liste, koje se formiraju uparenim oznakama
| Vrsta liste | HTML kod | Primjer |
|---|---|---|
| Lista sa naznakama u obliku kruga | ||
| Lista sa naznakama u obliku kruga | ||
| Lista sa kvadratnim markerima |
Tip markera može se neznatno razlikovati u različitim pretraživačima, kao i prilikom promjene fonta i veličine teksta.
Kreiranje liste sa kvadratnim markerima je prikazano u Primeru 11.2.
Primjer 11.2. Tip markera
Promjena uvjerenja
Rezultat ovog primjera prikazan je na sl. 11.2.
Na jeziku za označavanje hipertekst HTML postoji oznaka
- koristi za kreiranje liste za nabrajanje... To podržavaju svi moderni pretraživači i omogućava vam da prikažete stavke u redoslijedu koji ne zahtijeva numeriranje. Na primjer, vrlo često prikazuje stavke menija i sve što je povezano sa listama na stranici: posuđe, proizvodi, oprema, alati i još mnogo toga što treba navesti bez navođenja prioriteta ove ili one stavke.
Sintaksa oznake
Ovaj kod je konvertovan u listu sa nabrajanjem na sajtu:
Tag
- zahtijeva obavezna upotreba zatvaranje oznake
Upareni tag se koristi za formiranje stavki liste. 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 s nabrajanjem.
Šta može biti sadržaj liste sa nabrajanjem?To mogu biti različiti tekstovi, uključujući pojedinačne riječi, fraze i pasuse, slike, ugniježđene liste, komade php koda i još mnogo toga što treba jednostavno označiti.
Svaka stavka liste uvučena je 40 piksela udesno po defaultu. Koristeći CSS stilove možemo promijeniti prikaz ove liste 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.
Prilozi liste u listi su dozvoljeni
Na primjer
Atributi i svojstva oznake
Široko korišteni atribut oznake
- je atribut tipa koji pokazuje kako će izgledati marker liste. Može poprimiti sljedeće vrijednosti
1. type = "disk" - marker u obliku popunjenog kruga (ova vrijednost je zadana). Primjer diska je bio malo iznad.
2. type = "krug" - marker u obliku prozirnog kruga
Na primjer:
3.type = "kvadrat" - marker u obliku kvadrata
Na primjer:
A ovako to izgleda na stranici:
V CSS tip marker se postavlja pomoću atributa list-style-type:
Razmotrimo koje vrijednosti tip-stil liste može uzeti:
Napomena 2
Atribut se može dodijeliti kao sama oznaka
- i oznake
