"Alatunniste" on yleensä verkkosivun alimman osan lohko. Yleisin vaikeus tämän alatunnisteen sijoittamisessa on saada se sijoittumaan aina ikkunan alaosaan sivun täyteydestä tai selaintyypistä riippumatta. Ongelmaan on ollut melko vähän ratkaisuja siitä lähtien, kun massiivisesti siirryttiin lohkojen asetteluun, ja yksi niistä on annettu alla.
Se on välttämätöntä
Perustiedot CSS: stä ja HTML: stä
Ohjeet
Vaihe 1
Otetaan pohjana yleisin sivun asetteluohjelma - kolme lohkoa, jotka on sijoitettu päällekkäin. Yläosan (otsikon) tulee aina olla kohdistettu ikkunan yläreunaan, alaosa (alatunniste) - alareunaan, ja pääosan (rungon) tulee aina täyttää kaikki niiden välinen tila. Lähdekoodin on sisällettävä linkki XHTML 1.0 Transitional -määritykseen, ja tyylien kuvaus on sijoitettava ulkoiseen CSS-tiedostoon (Opera 9. XX: n ongelmien välttämiseksi). Rakenteen HTML-kuvaus on sijoitettava pääikkunaan sivun runko. Se alkaa tietysti ylälohkosta, jonka tagiin tulisi sijoittaa arvoinen tunniste-attribuutti, esimerkiksi divHead:
Otsikkolohko.
Päälohkon tulisi koostua sisäkkäisten lohkojen parista. Ulommalle annetaan divOut-tunniste ja sisäiselle - divContent:
Pääsisältö.
Alatunnisteeksi on asetettu divFoot:
Sivun alatunniste.
Vaihe 2
Sivun koko HTML-koodin tulisi näyttää tältä:
Kolme korttelia
@import "style.css";
Tämä on otsikkolohko.
Pääsisältö.
Tämä on sivun alatunniste.
Vaihe 3
Tyylikuvaus toteuttaa seuraavan asettelumekanismin: keskilohko (divOut) on asetettu 100%: n korkeuteen, ylemmän lohkon (divHead) sijoitus on absoluuttinen ja alemman - suhteellinen. Pääsisältöyksikössä (divContent) yläosassa on oltava vapaa tila, joka on yhtä suuri kuin otsikkolohkon korkeus, jotta se ei mene päällekkäin sivun pääsisällön kanssa. Ja alemman lohkon (alatunnisteen) yläosassa on oltava negatiivinen marginaali, joka on yhtä suuri kuin tämän lohkon korkeus. Tämä nostaa sen selainikkunan alareunan yläpuolelle. Tämä mekanismi voidaan toteuttaa käyttämällä css-tiedostoa, jolla on seuraava sisältö: * {margin: 0; pehmuste: 0}
html, body {korkeus: 100%;} body {
asema: suhteellinen;
väri: # 000;
}
#divOut {
marginaali: 0;
min-korkeus: 100%;
tausta: #FFF;
väri: # 000;
}
* html #divOut {korkeus: 100%;}
#divHead {
sijainti: absoluuttinen;
vasen: 0;
yläosa: 0;
leveys: 100%;
korkeus: 80px;
tausta: # 2F5000;
ylivuoto piilotettu;
tekstin tasaus: keskellä;
väri: #FFF;
} #divFoot {
asema: suhteellinen;
Tyhjennä molemmat;
yläreuna: -60px;
korkeus: 60px;
leveys: 100%;
taustaväri: # 2F5000;
tekstin tasaus: keskellä;
väri: #FFF;
}
.divContent {
leveys: 100%;
kellua: vasen;
toppaus: 81px;
} HTML-koodissa tyylitaululle määrittämäsi nimi on style.css.