„Poraštė“paprastai yra apatinis tinklalapio išdėstymo blokas. Dažniausias sunkumas nustatant šią poraštę yra tai, kad ji visada būtų lango apačioje, neatsižvelgiant į puslapio pilnumą ar naršyklės tipą. Nuo masinio perėjimo prie blokinio išdėstymo laiko problemos buvo nemažai, ir vienas iš jų pateiktas žemiau.
Tai būtina
Pagrindinės CSS ir HTML žinios
Nurodymai
1 žingsnis
Paimkime pagrindą labiausiai paplitusia puslapio išdėstymo schema - trys blokai, išdėstyti vienas virš kito. Viršutinė dalis (antraštė) visada turi būti sulygiuojama su viršutine lango riba, apačia (poraštė) - su apatine, o pagrindinė (korpusas) visada turi užpildyti visą tarpą tarp jų. Šaltinyje turi būti nuoroda į XHTML 1.0 pereinamąją specifikaciją, o stilių aprašymas turi būti dedamas į išorinį CSS failą (kad būtų išvengta problemų su „Opera 9. XX“). Struktūros HTML aprašas turi būti dedamas į pagrindinį puslapio turinys. Tai, žinoma, prasidės nuo viršutinio bloko, kurio žymoje turėtų būti dedamas identifikatoriaus atributas su verte, pavyzdžiui, divHead:
Antraštės blokas.
Pagrindinis blokas turėtų būti sudarytas iš poros įdėtų blokų. Išoriniam bus suteiktas „divOut“identifikatorius, o vidiniam - „divContent“:
Pagrindinis turinys.
Poraštė nustatyta į divFoot:
Puslapio poraštė.
2 žingsnis
Visas puslapio HTML kodas turėtų atrodyti taip:
Trys blokai
@import "style.css";
Tai yra antraštės blokas.
Pagrindinis turinys.
Tai puslapio poraštė.
3 žingsnis
Stiliaus aprašymas įgyvendina tokį išdėstymo mechanizmą: vidurinis blokas (divOut) yra nustatytas į 100% aukštį, viršutinis blokas (divHead) turės absoliučią padėtį, o apatinis - santykinis. Pagrindiniame turinio bloke (divContent) viršuje turi būti laisvos vietos, lygios antraštės bloko aukščiui, kad jis nepersidengtų su pagrindiniu puslapio turiniu. Apatinio bloko (poraštės) viršuje turėtų būti neigiama marža, lygi šio bloko aukščiui. Tai pakels jį virš apatinės naršyklės lango ribos. Šis mechanizmas gali būti įgyvendinamas naudojant css failą su tokiu turiniu: * {margin: 0; užpildas: 0}
HTML, body {aukštis: 100%;} body {
padėtis: giminaitis;
spalva: # 000;
}
#divOut {
paraštė: 0;
min-aukštis: 100%;
fonas: #FFF;
spalva: # 000;
}
* html #divOut {aukštis: 100%;}
#divHead {
pozicija: absoliuti;
kairėje: 0;
viršuje: 0;
plotis: 100%;
aukštis: 80 taškų;
fonas: # 2F5000;
perteklius paslėptas;
text-align: centre;
spalva: #FFF;
} #divFoot {
padėtis: giminaitis;
aišku: tiek;
paraštė viršuje: -60px;
aukštis: 60 taškų;
plotis: 100%;
fono spalva: # 2F5000;
text-align: centre;
spalva: #FFF;
}
.divContent {
plotis: 100%;
plūdė: kairė;
„topding-top“: 81 taškų;
} Pavadinimas, kurį HTML kode nurodėte stiliaus lape, yra style.css.
