Apatinis horizontaliausias puslapio maketo blokas dažnai vadinamas „poraštė“. Jame, kaip ir kituose puslapio blokuose, dedami dizaino elementai, tačiau, skirtingai nuo kitų, dažnai kyla specifinių problemų dėl šio konkretaus bloko padėties. Jie yra susiję su tuo, kad skirtingos naršyklės skirtingai supranta CSS kalbos standartus ir gali būti gana sunku pasiekti, kad poraštė būtų apatiniame naršyklės lango krašte. Žemiau pateikiamas vieno iš šios problemos sprendimo kodas.
Būtinas
Pagrindinės CSS ir HTML žinios
Nurodymai
1 žingsnis
Pirmoje puslapio šaltinio kodo eilutėje įdėkite nuorodą į XHTML 1.0 pereinamąją specifikaciją:
2 žingsnis
Įdėkite pagrindinius puslapio struktūros blokus dokumento korpuse (tarp ir žymų). Blokas, į kurį bus dedamas pagrindinis turinys, turi būti sudarytas iš dviejų įdėtų sluoksnių. Pavyzdžiui, leiskite išoriniam identifikatoriui „OuterDiv“, o vidiniam - „InnerDiv“:
Čia bus pagrindinis puslapio turinys.
Už jų padėkite poraštės bloką su identifikatoriumi, pavyzdžiui, „FooterDiv“:
Puslapio poraštė.
3 žingsnis
HTML kodo galvos dalyje (tarp ir ir žymių) įdėkite nuorodą į išorinį failą su css stilių aprašymu:
@import "footerStyle.css";
4 žingsnis
Išsaugokite visą pagrindinio puslapio kodą faile su HTML plėtiniu. Tai gali atrodyti taip:
Paspausta poraštė
@import "footerStyle.css";
Čia bus pagrindinis puslapio turinys.
Puslapio poraštė.
5 žingsnis
Sukurkite stiliaus lapo failą - paprasto teksto failą, kuris turėtų būti išsaugotas su „css“plėtiniu ir pavadinimu, kurį nurodėte HTML kode (footerStyle.css). Į šį failą parašykite šiuos stiliaus aprašymus, naudojamus puslapyje:
* {paraštė: 0; užpildas: 0}
HTML, body {aukštis: 100%;}
kūnas {
padėtis: giminaitis;
spalva: # 222222;
}
#OuterDiv {
paraštė: 0;
min-aukštis: 100%;
fonas: #aaaaaa;
spalva: # 222222;
}
* html #OuterDiv {aukštis: 100%;}
#FooterDiv {
padėtis: giminaitis;
aišku: tiek;
paraštė-viršus: -60px;
aukštis: 60 taškų;
plotis: 100%;
fono spalva: DarkBlue;
text-align: centre;
spalva: #eeeeff;
}
. InnerDiv {
plotis: 100%;
plūdė: kairė;
}
