Ang pinaka-pahalang na bloke ng isang layout ng pahina ay madalas na tinukoy bilang isang "footer". Sa loob nito, tulad ng sa iba pang mga bloke ng pahina, ang mga elemento ng disenyo ay inilalagay, ngunit hindi katulad ng iba, ang mga tukoy na problema ay madalas na lumitaw sa pagpoposisyon ng partikular na bloke na ito. Nakakonekta ang mga ito sa katotohanang naiiba ang pagkaunawa ng iba't ibang mga browser ng mga pamantayan ng wika ng CSS nang iba at maaaring maging mahirap na makuha ang footer na nasa ilalim na gilid ng window ng browser. Nasa ibaba ang code para sa isa sa mga solusyon sa problemang ito.
Kailangan
Pangunahing kaalaman sa CSS at HTML
Panuto
Hakbang 1
Sa pinakaunang linya ng source code ng pahina, maglagay ng sanggunian sa XHTML 1.0 Transitional na pagtutukoy:
Hakbang 2
Ilagay ang pangunahing mga bloke ng istraktura ng pahina sa loob ng katawan ng dokumento (sa pagitan ng at mga tag). Ang bloke kung saan ilalagay ang pangunahing nilalaman ay dapat na binubuo ng dalawang naka-salang mga layer. Halimbawa, hayaan ang panlabas na magkaroon ng identifier na OuterDiv, at ang panloob - InnerDiv:
Dito makikita ang pangunahing nilalaman ng pahina.
Sa likod ng mga ito maglagay ng isang footer block na may isang identifier, halimbawa, FooterDiv:
Talaan ng pahina.
Hakbang 3
Ilagay sa punong bahagi ng HTML code (sa pagitan ng mga at mga tag) isang link sa isang panlabas na file na may isang paglalarawan ng mga estilo ng CSS:
@import "footerStyle.css";
Hakbang 4
I-save ang kumpletong code ng master page sa isang file na may extension na html. Maaaring ganito ang hitsura:
Pinindot ang paa
@import "footerStyle.css";
Dito makikita ang pangunahing nilalaman ng pahina.
Talaan ng pahina.
Hakbang 5
Lumikha ng isang filesheet file - isang payak na file ng teksto na dapat i-save gamit ang extension ng css at ang pangalang tinukoy mo sa HTML code (footerStyle.css). Isulat sa file na ito ang mga sumusunod na paglalarawan ng istilo para sa mga bloke na ginamit sa pahina:
* {margin: 0; padding: 0}
html, katawan {taas: 100%;}
katawan {
posisyon: kamag-anak;
kulay: # 222222;
}
#OuterDiv {
margin: 0;
min-taas: 100%;
background: #aaaaaa;
kulay: # 222222;
}
* html #OuterDiv {taas: 100%;}
#FooterDiv {
posisyon: kamag-anak;
malinaw: pareho;
tuktok ng margin: -60px;
taas: 60px;
lapad: 100%;
background-color: DarkBlue;
text-align: gitna;
kulay: #eeeeff;
}
. InnerDiv {
lapad: 100%;
lumutang pakaliwa;
}
