Oznake in atributi za nogo v html. Kako pravilno potisnite plavajočo nogo na dno strani. Začnimo s teorijo

To je nekakšna nočna mora! Zakaj se noga vašega spletnega mesta znova pojavlja in spreminja dizajn? Je res nemogoče z nečim pravilno pritisniti nogo na dno strani? Vsaj vsebina ali opeke! Opeka v monitorju ne pleza?

Vidim, potem sedi in ne delaj ničesar, dokler ne prebereš našega članka do konca.

Izdelava prave noge za vašo spletno stran

Številni lastniki spletnih mest naletijo na to težavo, ko se noga strani preprosto pojavi "gor". In potem ni jasno, kaj storiti. Najpogosteje zasnove spletnih mest, ki so jih naredili v naglici, sami (obkrožite "nore roke") ali začetniki spletni skrbniki, grešijo s takšno pomanjkljivostjo.

Hkrati se na začetku življenja spletnega mesta ne zgodi nič grozljivega. In taka idila traja, dokler vsebina »z lastno težo« pritiska na klet in ji preprečuje, da bi se dvignila. Toda na stran je vredno postaviti manj materiala in nedavno "mirna" noga se takoj dvigne, kar celotno zasnovo spletnega mesta postavi v neprimeren videz.

Da bi odpravili to "pomanjkljivost" sestavljene predloge, ni treba porabiti denarja za storitve spletnega skrbnika. Najpogosteje lahko nogo spletnega mesta postavite sami. Razmislimo o vseh možnih možnostih za odpravo takšne težave:

Prvi način

Prvi način "zasidranja" noge "na dno" strani temelji na CSS. Začnimo s primerom kode in si nato podrobneje oglejmo njeno izvedbo:

html ( višina: 100 %; ) glava, krmarjenje, razdelek, članek, stran, noga ( prikaz: blok; ) telo ( višina: 100 %; ) #ovitek ( širina: 1000 slikovnih pik; rob: 0 samodejno; najmanjša višina: 100 %; višina: samodejno !pomembno; višina: 100 %; ) #header (višina: 150 slikovnih pik; barva ozadja: rgb(0,255,255); ) #vsebina (oblazinjenje: 100 slikovnih pik; višina: 400 slikovnih pik; barva ozadja: rgb(51,255,102) ; ) #noga (širina: 1000 slikovnih pik; rob: -100 slikovnih pik samodejno 0; višina: 100 slikovnih pik; položaj: relativna; barva ozadja: rgb(51,51,204); )

Da bi nogo prilepili na dno strani, smo oznako premaknili izven vsebnika (ovojna plast). Celotno stran in vsebino "telesa" raztegnemo do robov zaslona. Da bi to naredili, v kodi CSS nastavimo višino oznak na 100 %:

html ( višina: 100 %; ) telo ( višina: 100 %; )

Najmanjšo višino plasti vsebnika nastavite na 100 %. Za primer, ko je širina vsebine večja od višine vsebnika, nastavite lastnost na auto. Zahvaljujoč temu se bo ovoj samodejno prilagodil širini vsebine na strani:

#wrapper ( najmanjša višina: 100 %; višina: samodejno !pomembno; višina: 100 %; )

Vrstica kode "height: 100%" je za starejše različice IE, ki ne sprejemajo lastnosti min-height.

Da bi ločili prostor za nogo v zasnovi strani, smo nastavili oblazinjenje za oznako na 100 slikovnih pik:

#content (padding: 100px;)

Na tej točki imamo celozaslonsko spletno stran in dodatnih 100 slikovnih pik, ki so "nevtralizirane" z negativno vrednostjo zapolnitve noge (margin: -100px), ko so postavljene glede nanjo (position: relative). Torej, z negativno vrednostjo oblazinjenja, "premaknemo" nogo v območje vsebnika, ki ima višino 100%.

V tem primeru je oznaka spletnega dokumenta definirana z relativno novimi oznakami HTML 5, ki si jih starejši brskalniki lahko napačno razlagajo. Zaradi tega celotna zasnova strani morda ne bo pravilno prikazana. Da bi se temu izognili, morate zamenjati nove oznake iz arzenala različice 5 jezika hiperteksta z običajnimi:

glava vsebina noga

Izboljšana različica

Zgoraj obravnavana metoda o tem, kako narediti nogo na dnu strani "neomajno", ni primerna za vsakogar. Če boste v prihodnosti spremenili in izboljšali zasnovo svojega spletnega mesta s pojavnimi okni, potem je bolje, da opustite uporabo prejšnje izvedbe.

Najpogosteje se pri izvedbi pojavnih oken uporablja lastnost CSS z-index. Njegove vrednosti določajo vrstni red, v katerem se plasti nalagajo ena na drugo.

Višja kot je vrednost z-indeksa elementa, višji bo v skupnem "plastečem" skladu.

Ker pa smo v prejšnjem primeru uporabili negativno polnjenje noge, se bo spodnji del pojavnega okna prekrival z zgornjim območjem noge. Čeprav bo imel višjo vrednost indeksa z. Ker ima nadrejeni element pojavnega okna (ovijalka) še vedno manjšo vrednost za to lastnost.

Tukaj je boljša različica:

CSS - primer kode:

html, body (height: 100%; ) .header (height:120px; background-color: rgb(0,255,102); ) .main (min-height:100%; position: relative; background-color: rgb(100,255,255); ) .footer ( višina:150 slikovnih pik; položaj: absolutno; levo: 0; dno: 0; širina: 100 %; barva ozadja: rgb(0,0,153); )

Kot lahko vidite iz kode, smo nogo postavili kot del glavnega elementa. Vsebniku smo dali relativni položaj in absolutni položaj za nogo. Nogo smo popravili na samem dnu vsebnika tako, da smo levo in zgornjo pozicijo nastavili na 0.

Varianta za klet z nefiksno višino

Prejšnje izvedbe lahko zagotovijo, da je noga vedno na dnu strani. Vendar le, če je noga fiksne širine. Kaj pa, če količine vsebine, ki je vanj, ni mogoče predvideti?

To bo zahtevalo naprednejšo možnost za nepopravljeno klet. Nastavi nogo na vrstico tabele za lastnost prikaza. Tako bo prikazan kot vrstica tabele.

Pozdravljeni, dragi bralci spletnega dnevnika. Nadaljujemo temo o postavitvi blokov, ki smo jo začeli in nadaljevali v prejšnjih treh člankih. Načeloma nam je že uspelo ustvariti postavitev spletnega mesta z dvema in tremi stolpci, uspeli pa smo celo razmisliti o niansah ustvarjanja tekoče postavitve.

Poleg tega so bili v prvih člankih o postavitvi spletnega mesta () obravnavani nekateri osnovni koncepti spletnega skrbništva, brez razumevanja katerih bi bilo precej težko razumeti nianse.

Kakšne težave ste imeli s postavitvijo naše spletne strani?

Danes bomo poskušali rešiti eno majhno težavo, ki se lahko pojavi pri postavitvi, ki smo jo ustvarili prej. Najpogosteje se ta situacija pojavi pri ogledu na velikih monitorjih (z visoko ločljivostjo) in pri prikazu strani z majhno količino informacij.

V tem primeru se lahko izkaže, da noga ne bo pritisnjena na dno zaslona, ampak se bo nahajala skoraj na sredini po višini, kar bo v večini primerov videti grdo in neestetsko.

Še vedno pa po mojem mnenju morate pritisniti nogo na sam dno postavitve spletnega mesta, kar bo še posebej veljalo v primeru, ko je višina strani manjša od višine uporabnikovega zaslona. Shematično je to mogoče predstaviti na naslednji način:

Tisti. pravilno obnašanje noge za primer majhne količine informacij na strani in velikega uporabniškega zaslona bo naslednje:

Za izvedbo tega moramo izvesti številne manipulacije s kodo naše postavitve. Poleg tega bomo spremenili ne samo stilsko datoteko CSS Style.css, temveč tudi Index.html, ki vsebuje kodo Html in tvori bloke Div. Ampak najprej.

Na primer, uporabili bomo postavitev spletnega mesta s tremi stolpci, ki smo jo ustvarili prej. V tem primeru bo Index.html videti takole:

Glava Glava Vsebina strani Vsebina strani Vsebina strani Vsebina strani Noga

In naslednje lastnosti CSS so bile zapisane v datoteki Style.css:

Telo, html ( margin:0px; padding:0px; ) #maket ( width:800px; margin:0 auto; ) #header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px ; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content(background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer (barva ozadja:#FFC0FF; jasno:obe; )

No, sama postavitev je izgledala nekako takole:

Kot lahko vidite, noga ni pritisnjena na dno in zato ne ustreza našim zahtevam (vedno se nahaja pod najnižjim stolpcem), zato bomo kodo morali prilagoditi. Enako je mogoče storiti za postavitev v dveh stolpcih in tudi za tekočo postavitev. Metoda je univerzalna.

Kako potisniti nogo na dno postavitve spletnega mesta

Zato moramo premakniti nogo Div na dno zaslona. Če želite to narediti, morate najprej nastaviti višino celotne strani na sto odstotkov (zasedla bo celoten zaslon). To bo potrebno, da lahko nato spremenite velikost glavnega bloka s postavitvijo tudi do 100 %.

Vsa vsebina strani spletnega mesta je postavljena v začetne in končne oznake Body, zato moramo dodati še eno lastnost CSS za oznako Body v Style.css, ki nastavi višino na 100 %:

Telo, html ( margin:0px; padding:0px; height: 100%; )

To na noben način ne bo vplivalo na videz, zdaj pa lahko glavni blog raztegnete na celotno višino zaslona. Tisti. je bila nekakšna pripravljalna faza.

Osnovne lastnosti CSS, če želite, si lahko ogledate. Zdaj pa nastavimo vsebnik Div, ki obdaja našo celotno postavitev, na najmanjšo višino 100 %:

Prav tako ga želim izpostaviti (div z id="maket"). Da bi to naredili, mu bomo nastavili okvir z ustrezno lastnostjo Border ():

Lastnost border: solid 3px black vam omogoča, da za ta vsebnik nastavite trdno obrobo (solid) z debelino 3 slikovnih pik v črni barvi. Tako boste lahko jasno videli, da je vsebnik s postavitvijo raztegnjen na celotno višino zaslona, tudi z majhno količino informacij na strani:

Zdaj bomo morali blok noge vzeti iz splošnega vsebnika in ga postaviti spodaj, takoj za splošnim. Kaj bo dalo? In to, da se končno noga v postavitvi povoli, da gre dol in se ne bo tako kot prej stiskala k svojemu najdaljšemu stolpcu. V tem primeru bo Index.html videti takole:

Glava Glava Levi stolpec Meni Meni Meni Meni Desni stolpec Meni Meni Meni Meni Meni Vsebina strani Vsebina strani Vsebina strani Vsebina Noga

Upoštevajte, da blok noge ni več znotraj skupnega vsebnika (maket), zato njegove širine ne nadzirajo več lastnosti CSS, nastavljene za maket v datoteki Style.css. Noga bo raztegnjena po širini zaslona, vendar se bo še vedno nahajala na dnu zaslona, takoj pod glavnim blokom:

Vendar spet obstaja težava, ker če želite videti nogo, se morate zdaj pomikati po zaslonu v brskalniku (glejte drsni trak na zgornji sliki).

Izkazalo se je, da je to zato, ker glavni vsebnik (maket) zaseda celotno velikost zaslona po višini (to določa lastnost min-height: 100 %), noga pa se nahaja takoj za njim in boste morali uporabiti pomikanje, da si ga ogledate, kar ni zelo priročno in funkcionalno. .

To težavo lahko rešite tako, da vsebniku v nogi Div dodate negativno oblazinjenje, tako da se premakne navzgor za razdaljo, ki je enaka njegovi višini. V tem primeru bo vsebnik noge potekal čez glavni vsebnik in se prilegal višini zaslona brskalnika (tj. za ogled vam ne bo treba uporabljati drsenja).

Če pa želite nastaviti negativni zamik od zgoraj, morate poznati to isto višino noge, vendar je še ne vemo.

Zato najprej nastavimo višino vsebnika, ki vsebuje nogo, tako da nastavimo ustrezno lastnost v Style.css:

#footer( background-color:#FFC0FF; clear:both; height: 50px; )

Nato mu nastavimo negativno oblazinjenje od zgoraj do višine, ki je enaka njegovi višini:

To bo omogočilo, da se noga dvigne natanko do svoje višine in se tako prilega zaslonu brskalnika (zdaj lahko odstranimo lastnost CSS border: solid 3px black iz pravila maket, tako da debelina obrobe ne preprečuje naše celotne postavitve , skupaj z nogo, od prileganja zaslonu po višini):

Kot lahko vidite, se zdaj drsni trak v brskalniku ne prikaže in naša celotna postavitev spletnega mesta s tremi stolpci, ki temelji na blokih, se prilega enemu zaslonu (v primeru majhne količine informacij na strani) in ima nogo na samem dno. Kar je točno to, kar smo morali storiti.

Vstavimo distančnik in se borimo z Internet Explorerjem

Toda pojavi se težava, ki se bo pojavila šele, ko bo na strani s postavitvijo več informacij in se lahko izkaže ta situacija:

Izkazalo se je, da lahko pride do situacije, ko bodo informacije v enem od stolpcev postavitve stekle v nogo, kar ne bo videti lepo. To je posledica razvpitega negativnega oblazinjenja, ki smo mu ga nastavili in je pomagalo dvigniti našo nogo v glavni vsebnik postavitve.

Tisti. izkaže se, da sta na dnu zaslona dva bloka, ki se prekrivata v kleti.

Rešitev te težave je dodajanje novega praznega vsebnika Div (imenovanega distančnik) glavnemu vsebniku naše postavitve (postavitve), na mestu, kjer je bil prej blok noge.

Če nastavimo višino tega novega vsebnika na višino noge, se lahko izognemo trčenju informacij iz glavnega vsebnika z blokom noge. Dajmo temu vsebniku ID () z imenom Rasporka in posledično bo Index.html naše postavitve s tremi stolpci videti takole:

Glava Glava Levi stolpec Meni Meni Meni Desni stolpec Meni Meni Meni Meni Meni Stran Vsebina strani Vsebina strani Vsebina strani Stran Stran Stran Stran Stran Noga strani

In v Style.css pišemo za to ( , ki nastavi višino tega vsebnika distančnika enako višini kleti:

#rasporka ( višina: 50px; )

Posledično bo noga od spodaj pritisnjena ne na informacije v glavnem vsebniku (na primer besedilo v najvišjem stolpcu), temveč na območje, ki je enako visoko kot noga z distančnim vsebnikom, ki ne vsebujejo kakršne koli informacije.

Na ta način se izognemo kolizijam in popačenjem v naši postavitvi s tremi stolpci. Vse bo jasno in lepo (spodobnost in plemenitost):

Kot sem omenil zgoraj, je treba širino noge nastaviti posebej, ker. ta posoda ni več del glavne. Če želite to narediti, morate v datoteko CSS dodati dodatne lastnosti za nogo, ki vam omogočajo, da nastavite njeno širino in jo vodoravno poravnate na sredini zaslona.

Smiselno je nastaviti širino enako širini celotne postavitve z lastnostjo Width, horizontalno poravnavo pa je mogoče izvesti na enak način, kot smo naredili za celotno postavitev na postavitvi blokov.

Zato bomo morali dodati dodatne lastnosti za ID noge:

#footer( background-color:#FFC0FF; clear:both; height: 20px; margin-top:-20px; width:800px; margin-left: auto; margin-right: auto; )

Z uporabo lastnosti width:800px je širina nastavljena na 800 slikovnih pik, z uporabo dveh lastnosti margin-left: auto in margin-right: auto pa se samodejno nastavi nastavitev margin-left levo in desno od noge, kot zaradi česar bodo ti robovi enaki in naš junak se bo poravnal na sredino:

No, zdi se, da ni več kaj izboljšati, a tam je bilo. Kot vedno naš najljubši brskalnik Internet Explorer 6 ne razume nečesa iz lastnosti CSS, ki jih uporabljamo. V tem brskalniku (in verjetno še v kakšnem starem) kljub našemu trudu noga ne bo pritisnjena na dno, ampak se bo še vedno držala najvišjega stolpca postavitve strani.

To je vse zato, ker ( ne razume lastnosti min-height: 100 %, ki smo jo uporabili za nastavitev najmanjše višine glavnega polja, da je enaka višini zaslona.

Zato bomo morali za rešitev te težave uporabiti tako imenovani vdor, ki nam omogoča, da starim brskalnikom (na prste) razložimo, kaj naj naredijo. Pred seznamom lastnosti CSS za maket boste morali vstaviti naslednjo kombinacijo:

* html #make ( višina: 100 %; )

To pravilo bo veljalo le za brskalnik Internet Explorer 6, ostali ga ne bodo upoštevali in upoštevali.

Torej bo končni videz Style.css z nogo pritisnjeno na dno zaslona naslednji:

Telo, html ( margin:0px; padding:0px; height: 100%; ) * html #maket (height: 100%; ) #maket ( width:800px; margin:0 auto; min-height: 100%; ) # glava (barva ozadja:#C0C000; ) #levo(barva ozadja:#00C0C0; širina:200px; lebdeče:levo;) #desno(širina:200px; barva ozadja:#FFFF00; lebdi:desno;) #vsebina (barva ozadja:#8080FF; levi rob:202px; desni rob:202px;) #noga(barva ozadja:#FFC0FF; jasno:oboje; višina: 50px; zgornji rob:-50px; širina:800px; margin-left: auto; margin-right: auto; ) #rasporka ( višina: 50px; )

No, končna oblika Index.html je bila dana nekoliko višje. To je vse, na tej seriji člankov, posvečenih blokovni postavitvi 2 in 3 stolpcev fiksne in gumijaste postavitve spletnega mesta, se lahko šteje za dokončano.

Ogledate si lahko tudi video "Delo z oznako Html div":

Srečno! Se vidimo kmalu na spletnih straneh spletnega dnevnika

Morda vas bo zanimalo

Bločna postavitev - izdelamo dvostolpčne, tristolpčne in tekoče postavitve spletnega mesta
Postavitev DiV - ustvarite bloke za postavitev z dvema stolpcema v HTML, določite njihove velikosti in nastavite položaj v CSS

Pogosto pri namestitvi gumbov, pasic itd. v telo oznak body in head je treba vstaviti kode html, css in JavaScript. Nepravilna ročna izvedba te operacije lahko poškoduje spletno mesto in celo popolnoma prekine njegovo delovanje.

Za avtomatizacijo tega postopka je bil ustvarjen čudovit vtičnik, pojdite na nastavitve na skrbniški plošči in delajte z užitkom. Je enostaven za uporabo in ima naslednje lastnosti:

Če želite sliko povečati, kliknite nanjo z miško. Znova kliknite za pomanjšanje.

1. Glava in noga strani (Glava in noga strani). Dodajanje kode na glavno stran spletnega mesta.

Koda, ki se doda v razdelek HEAD na domači strani (koda, ki se vstavi v glavo domače (glavne) strani). Omogoča vstavljanje meta oznak, kod za reklamne pasice, gumbe itd. v telesu oznake. Pogosteje je neviden del kode zaradi odsotnosti vizualnega prikaza na spletnem mestu. Rezultat dela vidnega dela kode se bo pojavil nad glavo na glavni strani.

Koda se doda v razdelek HEAD vsake strani (koda se vstavi v glavo vsake strani). Dodajanje kode v telo oznake v razdelku HEAD. Rezultat vidnega dela kode bo prikazan nad glavo na vseh straneh, vključno z glavno.

Koda, ki se doda pred koncem strani (koda, ki se vstavi na konec (nogo) strani). Dodajanje kode v nogo na vseh straneh pred zaključno oznako. To deluje samo za teme, ki imajo nogo in datoteko footer.php.

Skoraj vsi števci so sestavljeni iz dveh delov - to sta kodi nevidnega in vidnega (informatorskega) dela števca. Koda nevidnega dela se vstavi za začetno oznako, čim višje proti vrhu strani. Če želite to narediti, lahko uporabite vtičnik ali popravite neposredno v datoteki header.php, . Koda vidnega dela (informatorja) se vstavi v nogo spletnega mesta s pomočjo vtičnika Header and Footer pred zaključno oznako ali v stransko vrstico s pomočjo pripomočka.

2. Objavite vsebino (objavite vsebino). Dodajanje kode na začetek in konec objave na vseh straneh kategorij, ko je objava prikazana v celoti.

Koda, ki se vnese pred vsako objavo (koda, ki se vnese pred vsako objavo). Kodo vstavite na začetku vsake kategorije objave (članka) za naslovom, le če je članek prikazan v celoti.

Koda za vsako objavo (koda za vsako objavo). Vstavite kodo za vsako objavo kategorije.

3. Vsebina strani. Dodajanje kode na začetek in konec objave vseh statičnih strani, ko je objava prikazana v celoti.

Koda se vstavi pred vsako stranjo. Kodo vstavite na začetku vsake objave (članka) statične strani za naslovom, le če je članek prikazan v celoti.

Koda, ki se vstavi za vsako stranjo. Koda bo vstavljena za objavo na vsaki statični strani.

4. Facebook. Če dodate metafunkcijo og:image (protokol Open Graph, ki se lahko uporablja za vnos metapodatkov v formatu Social Graph na strani z viri), na primer seznam stikov na Faceboocku, potem ko kliknete gumb Faceboock na začetku ali koncu objav, lahko na vseh straneh nadzirate izbiro slike, ki bo šla na uporabnikov zid.

5. Izrezki. Možno je nastaviti izseke, ki se pošljejo na uporabnikov zid ob pritisku na gumb socialnega omrežja, ki se nahaja na začetku ali na koncu objave. Odlomki se pošiljajo kot , kjer je N številka odlomka od 1 do 5.

6. Opombe in parkirane kode. Opombe.

V HTML5 je bilo uvedenih več novih oznak za strukturo kode: , , , , , ki v nekaterih primerih nadomeščajo običajne . Čeprav se zdi, da med oznakama ni velike razlike, je med njima velika vrzel. Oznake niso namenjene ljudem, ki nimajo razloga pogledati izvorno kodo strani, temveč strojem, ki interpretirajo kodo. Stroji ali roboti ne razumejo, zanje je to tipična označevalna oznaka - zamenjajte jo z in pomen se ne bo spremenil. Druga stvar je, da robot, ko je našel to oznako, jo zazna natanko kot glavo spletnega mesta ali razdelka.

Kaj na koncu da? Iskalniki začnejo bolje indeksirati spletno mesto, saj jasno ločijo vsebino strani od pomožnih elementov. Govorni brskalniki, namenjeni slepim, preskočijo naslov in gredo neposredno na vsebino. Spletna mesta lahko samodejno delijo vsebino in druge informacije med seboj. Vse te funkcije se imenujejo semantika in vam omogočajo, da podatke predstavite v obliki, primerni za robote.

Najprej naredimo glavo spletnega mesta z oznako (primer 6.2).

Primer 6.2. Uporaba

Poskus dodajanja ozadja oznaki v slogih ni privedel do ničesar, ozadje v nekaterih brskalnikih noče biti prikazano. Vse nove oznake bi morale biti najprej zasnovane na bloku prek lastnosti prikaza, nato pa se bodo začele pravilno prikazovati (primer 6.3).

Primer 6.3. Glava spletnega mesta

HTML5 CSS 2.1 IE 7+ IE 9+ Cr Op Sa Fx

glava (prikaz: blok; ozadje: #00B0D8 url(images/header-gradient.png) repeat-x; )

Ta primer bo deloval v vseh brskalnikih razen v IE7 in IE8. Internet Explorer elementom, ki jih ne razume, ne doda sloga. Ta nesporazum je mogoče popraviti z ustvarjanjem navideznega elementa z uporabo JavaScripta. Če želite to narediti, vključite v takšno kodo.

document.createElement("glava");

Če je na strani ena oznaka, je ta skript povsem primeren za delo. Vendar ne želim desetkrat ponoviti vrstice za deset različnih oznak, zato ta postopek avtomatiziramo prek zanke. Same oznake so podane kot seznam, ločene z vejico (primer 6.4).

Primer 6.4. Skript za IE

var e = ("članek,na stran,napis slike,slika,noga,glava,hskupina,nav,razdelek,čas").split(","); za (var i = 0; i< e.length; i++) { document.createElement(e[i]); }

Sam skript je zavit v pogojne komentarje za delovanje samo v IE različici 8.0 in novejših. IE9 že vključuje podporo za nove oznake HTML5.

Zgornjega primera ni treba vstaviti na vaše spletno mesto, lahko uporabite javni skript, ki ga je napisal Remy Sharp in se distribuira pod licenco MIT. Če želite to narediti, samo pokažite nanj povezavo, kot je prikazano v primeru 6.5.

Primer 6.5. Skript za IE

Vse navedene skripte je treba postaviti v kodo pred CSS.

Tako je za polno uporabo oznak HTML5 v vseh brskalnikih dovolj izpolnjevanje treh pogojev:

namestite doctype;

vključi skript iz primera 6.4 ali 6.5;

nastavite prikaz: blok v slogih za nove oznake.

Zdaj pa si podrobneje oglejmo nekatere oznake HTML5, da bomo razumeli njihov obseg.

Primer 6.6. Uporaba oznake

HTML5 IE Cr Op Sa Fx

članek Odtisi nevidnih zveri Zgodba o tem, kako so se v bližini jedilnice pojavile skrivnostne roza stopinje šestih prstov in zakaj se je to zgodilo.

Določa blok, ki ni povezan z glavno vsebino, za umestitev kategorij, povezav do arhiva, oznak in drugih informacij (primer 6.7). Takšen blok, če se nahaja ob strani, se običajno imenuje "stranska vrstica" ali "stranska vrstica".

Primer 6.7. Uporaba

HTML5 IE Cr Op Sa Fx

poleg dokumenta.createElement("stran"); document.createElement("članek"); na stran (ozadje: #f0f0f0; /* Barva ozadja */ oblazinjenje: 10px; /* Robovi */ širina: 200px; /* Širina stranske vrstice */ lebdenje: desno; /* Prelomi levo */ ) članek ( rob-desno: 240px ; /* Desno oblazinjenje */ display: block; /* Block element */ )

Varčujte z elektriko

dober jezik

Čigava palica je večja

Zgodba o tem, kako smo morali varčevati z elektriko, kakšni so bili ukrepi za to in kam je pravzaprav šla.

Uporablja se za združevanje poljubnih elementov, kot so slike in njihovi napisi (primer 6.8).

Primer 6.8. Uporaba

HTML5 IE Cr Op Sa Fx

figura document.createElement("figura"); document.createElement("figcaption"); figura ( ozadje: #5f6a72; /* Barva ozadja */ oblazinjenje: 10px; /* Oblazinjenje okoli */ display: block; /* Block element */ width: 150px; /* Širina */ float: levo; /* Blokira vrstico gor vodoravno */ margin: 0 10px 10px 0; /* robovi */ text-align: center; /* sredinska poravnava */ ) figcaption ( color: #fff; /* barva besedila */ )

Katedrala Svete Sofije

Poljska cerkev

Vsebuje opis za oznako. Oznaka mora biti prvi ali zadnji element v skupini.

Nastavi "nogo" mesta ali razdelka, običajno vsebuje ime avtorja, datum dokumenta, kontaktne in pravne informacije (primer 6.9).

Primer 6.9. Uporaba

HTML5 IE Cr Op Sa Fx

footer Osebna spletna stran Christine Vetrove Dobrodošli!

Vesel sem, da vas lahko pozdravim na svoji strani.

Avtorske pravice Christina Vetrova

Določa "glavo" spletnega mesta ali razdelka.

Uporablja se za združevanje naslovov spletne strani ali razdelka (primer 6.10).

Primer 6.10. Uporaba

HTML5 IE Cr Op Sa Fx

hgroup Kristina Vetrova Osebna spletna stran

Nastavi navigacijo po spletnem mestu (primer 6.11). Če je na strani več blokov povezav, so vanje običajno postavljene prednostne povezave. Sprejemljiva je tudi uporaba več oznak v dokumentu. Vlaganje v notranjost je prepovedano.

Primer 6.11. Uporaba

HTML5 IE Cr Op Sa Fx

nav Cheburashka in krokodil Gena Cheburashka | Gena | Šapokljak | Lariska Dobrodošli!

Določa del dokumenta, ki lahko vključuje glave, glavo, nogo in besedilo (primer 6-12). Eno oznako lahko ugnezdite v drugo.

Primer 6.12. Uporaba

HTML5 IE Cr Op Sa Fx

razdelek Streljanje Polipropilen

Zgodba o tem, kako so snemali film, kjer so se liki sproščali na plaži, potem je prišel antagonist, pretepel protagoniste, jih vrgel v bazen in kaj je bilo iz tega.

dober jezik

Zgodba o tem, kako je potekal studio za učenje esperanta, nad njim, na verandi, studio šaljivcev, kjer so zastrupljali šale in kaj je iz tega nastalo.

Označi besedilo v oznaki kot datum, uro ali oboje, datum in uro. Podate ga lahko neposredno znotraj vsebnika ali pa ga nastavite prek atributa datetime (primer 6.13).

Datum in čas sta nastavljena v mednarodnem formatu ISO 8601. Primeri registracije so podani v tabeli. 6.1.

Vsaka enota ima svojo nastavljeno obliko in omejitve.

Leto - štirimestno (1860).
Mesec - dve števki (01 - januar, 02 - februar, 12 - december).
Dan je dvomesten od 01 do 31.
Ura je dvomestna od 00 do 23.
Minute so dvomestne od 00 do 59.
Sekunde so dve števki od 00 do 59.
Časovni pas so ure in minute z znakom plus ali minus.

Datum in čas sta ločena z veliko latinično črko T. Po potrebi se časovni pas zapiše za časom z znakom plus ali minus. Na primer, za Moskvo bo časovni pas +03:00.

Primer 6.13. Uporaba

HTML5 IE Cr Op Sa Fx

čas

1957-10-04 je bil izstreljen prvi umetni Zemljin satelit.

1960-08-19 prvi polet psov v vesolje.

1961-04-12 prvi polet človeka v vesolje.

16.6.1963 prvi polet kozmonavtke.

1969-07-21 pristanek človeka na luni.

Spomnim se, da je bila v trenutku, ko sem začel preklopiti s tabel na postavitev po divih, ena od težav, na katero sem naletel - kako pritisniti nogo spletnega mesta (footer) na sam dno okna brskalnika, tako da stran je videti raztegnjena do polne višine, ne glede na količino besedila, in če je višina strani večja od višine okna brskalnika (ko se pojavi drsnik), bo noga ostala na svojem pravem mestu.

Medtem ko tabele rešujejo to težavo samo z določitvijo višine tabele in/ali celice, ki je v njej ugnezdena, se pri uporabi CSS v blokovni postavitvi uporablja popolnoma drugačen pristop.

V procesu prakse sem zase ugotovil 5 načinov, kako pritisniti nogo na dno okna brskalnika s pomočjo CSS.

Koda HTML vseh predstavljenih metod ima naslednjo strukturo (razlika je le v kodi CSS):

Spodnja koda CSS vključuje le tiste lastnosti, ki so minimalno potrebne za implementacijo ustrezne metode. Za vsakega od njih si lahko ogledate primer v živo.

Prvi način

Noga je potisnjena navzdol z absolutnim pozicioniranjem in potegom višine nadrejenih blokov (html, body in .wrapper) za 100 %. V tem primeru mora vsebina block.content določiti spodnji zamik, ki je enak ali večji od višine noge, sicer bo slednja zaprla del vsebine.

* ( margin: 0; padding: 0; ) html, body ( height: 100 %; ) .wrapper ( position: relative; min-height: 100 %; ) .content ( padding-bottom: 90px; ) .footer ( position : absolutno; levo: 0; spodaj: 0; širina: 100 %; višina: 80 slikovnih pik; )

Drugi način

Noga je pritisnjena navzdol tako, da se blok vsebine in njegovi "starši" raztegnejo na celotno višino okna brskalnika in dvignejo nogo navzgor skozi negativni rob (margin-top), da se znebijo navpičnega drsenja, ki se pojavi. V tem primeru je treba določiti višino kleti, ki mora biti enaka vrednosti alineje.

* ( rob: 0; oblazinjenje: 0; ) html, body, .wrapper ( višina: 100 %; ) .vsebina ( velikost polja: obroba polja; najmanjša višina: 100 %; oblazinjenje dna: 90 slikovnih pik; ) . noga (višina: 80px; zgornji rob: -80px;)

Zahvaljujoč lastnosti box-sizing: border-box ne dovolimo, da polje .content preseže 100 % višine. Torej je v tem primeru minimalna višina: 100 % + oblazinjenje dna: 90 slikovnih pik enako 100 % višine okna brskalnika.

Tretji način

Dobro je, ker za razliko od drugih metod (razen 5.) višina noge ni pomembna.

* ( margin: 0; padding: 0; ) html, body ( height: 100 %; ) .wrapper ( display: table; height: 100 %; ) .content ( display: table-row; height: 100 %; )

Tu posnemamo vedenje tabele tako, da blok .wrapper spremenimo v tabelo in blok .content v vrstico tabele (lastnosti display: table oziroma display: table-row). Zaradi tega, pa tudi zaradi dejstva, da so blok .content in vsi njegovi nadrejeni vsebniki nastavljeni na višino 100 %, je vsebina raztegnjena na celotno višino, vendar brez višine noge, ki se določi samodejno - emulacija tabele ne dovoljuje, da bi noga zlezla čez višino okna brskalnika.

Zaradi tega je noga pritisnjena na dno.

Četrti način

Ta metoda ni podobna nobeni od prejšnjih, njena posebnost pa je v uporabi CSS funkcije calc() in merske enote vh, ki ju podpirajo le sodobni brskalniki. Tukaj morate vedeti natančno višino kleti.

* ( rob: 0; oblazinjenje: 0; ) .content ( min-height: calc (100vh - 80px); )

100vh je višina okna brskalnika, 80px pa višina noge. In s pomočjo funkcije calc() odštejemo drugo vrednost od prve in s tem pritisnemo nogo na dno.

Kateri brskalniki podpirajo calc() in vh, lahko ugotovite na caniuse.com na naslednjih povezavah: podpora za funkcijo calc(), podpora za enoto vh.

Peta metoda (najbolj pomembna)

To je najboljša metoda od vseh predstavljenih, vendar deluje le v sodobnih brskalnikih. Kot pri tretji metodi višina noge ni pomembna.

* ( margin: 0; padding: 0; ) html, body ( height: 100 %; ) .wrapper ( display: flex; flex-direction: column; min-height: 100 %; ) .content ( flex: 1 0 auto ; ) .footer ( flex: 0 0 auto; )

Izvedete lahko več o podpori brskalnika za lastnost flex.