"Voettekst" is gewoonlik die onderste blok van 'n webbladuitleg. Die algemeenste probleem om hierdie voetskrif te plaas, is om dit altyd onder in die venster te plaas, ongeag die volheid van die bladsy of die blaaier. Daar was 'n hele paar oplossings vir die probleem sedert die groot oorgang na blokuitleg, en een daarvan word hieronder gegee.
Dit is nodig
Basiese kennis van CSS en HTML
Instruksies
Stap 1
Kom ons neem die mees algemene bladsy-uitlegskema as basis - drie blokke wat mekaar bo-op mekaar plaas. Die bokant (koptekst) moet altyd in lyn wees met die boonste rand van die venster, die onderkant (voetskrif) - aan die onderrand en die hoofstuk (liggaam) moet altyd al die spasies tussen hulle vul. Die bronkode moet 'n skakel na die XHTML 1.0-oorgangspesifikasie bevat, en die beskrywing van style moet in 'n eksterne CSS-lêer geplaas word (om probleme met Opera 9. XX te vermy). Die HTML-beskrywing van die struktuur moet hoofsaaklik geplaas word liggaam van die bladsy. Dit begin natuurlik vanaf die boonste blok, in die merker waarvan 'n identifiseerderkenmerk met 'n waarde geplaas moet word, byvoorbeeld divHead:
Kopblok.
Die hoofblok moet uit 'n paar geneste blokke bestaan. Die buitenste een sal die divOut-identifiseerder kry, en die innerlike - divInhoud:
Hoofinhoud.
Die voetskrif is ingestel op divFoot:
Bladvoetskrif.
Stap 2
Die volledige HTML-kode van die bladsy moet so lyk:
Drie blokke
@import "style.css";
Dit is 'n kopblok.
Hoofinhoud.
Dit is die voetskrif van die bladsy.
Stap 3
Die stylbeskrywing implementeer die volgende uitlegmeganisme: die middelste blok (divOut) is op 100% hoogte gestel, die boonste blok (divHead) het absolute posisie en die onderste een - relatief. In die hoofinhoudblok (divContent) moet daar 'n vrye spasie bo wees wat gelyk is aan die hoogte van die opskrifblok sodat dit nie die hoofinhoud van die bladsy oorvleuel nie. En die onderste blok (voetskrif) moet aan die bokant 'n negatiewe marge hê, gelyk aan die hoogte van hierdie blok. Dit verhoog dit bo die onderste rand van die blaaiervenster. Hierdie meganisme kan geïmplementeer word met behulp van 'n css-lêer met die volgende inhoud: * {margin: 0; opvulling: 0}
html, liggaam {hoogte: 100%;} liggaam {
posisie: relatief;
kleur: # 000;
}
#divOut {
marge: 0;
min-hoogte: 100%;
agtergrond: #FFF;
kleur: # 000;
}
* html #divOut {hoogte: 100%;}
# divHead {
posisie: absoluut;
links: 0;
bo: 0;
breedte: 100%;
hoogte: 80px;
agtergrond: # 2F5000;
oorloop: verborge;
teksbelyning: middel;
kleur: #FFF;
} # divivoot {
posisie: relatief;
duidelik: albei;
marge-top: -60px;
hoogte: 60px;
breedte: 100%;
agtergrondkleur: # 2F5000;
teksbelyning: middel;
kleur: #FFF;
}
.divInhoud {
breedte: 100%;
dryf: links;
padding-top: 81px;
} Die naam wat u vir die stylblad in die HTML-kode gespesifiseer het, is style.css.
