Hoe om die onderkant van die bladsy ("voetskrif") aan die onderrand van die venster te laat kleef - dit is waarskynlik die mees algemene probleem in die uitleg van werfbladsye. Daar is natuurlik oplossings, en daar is verskeie daarvan. Hieronder is een manier om seker te maak dat die voetskrif altyd onderaan die bladsy gedruk word, ongeag die hoeveelheid inhoud en die tipe blaaier.
Dit is nodig
Basiese kennis van CSS en HTML
Instruksies
Stap 1
Kom ons neem een van die meer tipiese paginasieskema's as voorbeeld: dit het 'n solder (kop), hoofblok en voetskrif. Natuurlik, indien nodig, kan u verskeie kolomme in die hoofblok plaas, maar ons sal dit nie hier doen nie, ons sal slegs daarop fokus om die voetskrif nie te plaas nie. Die HTML-kode van die bladsy begin met die verklaring van die spesifikasie:
Tussen die etikette en, benewens die bladsytitel, sal ons ook 'n aanduiding van die kodering plaas: sowel as 'n skakel na 'n eksterne CSS-lêer wat 'n beskrywing van style bevat: @import "styles.css"; Ons sal nie die beskrywing van style direk in die html-kode van die bladsy om komplikasies met die Opera-blaaier van die negende weergawe te voorkom. Tussen die etikette en plaas die blokstruktuur van die bladsy. Die eerste is natuurlik die titelblok. Ons gee die hoof-id vir die instelling van style vir hierdie spesifieke blok:
Hierdie opskrif is altyd bo-aan die venster.
Dan - die hoofblok van die bladsy. Dit bestaan uit twee geneste - buitenste (identifiseerder - buitenste) en innerlike (identifiseerder - buitenste omslag):
Dit is die hoofdeel.
En uiteindelik, die voetskrif:
Dit is voetskrif - altyd onder in die venster!
Die volledige bladsy sal so lyk:
Hoe om op die voetskrif te druk
@import "style.css";
Hierdie opskrif is altyd bo-aan die venster.
Dit is die hoofdeel.
Dit is voetskrif - altyd onder in die venster!
Stap 2
Kom ons gaan nou oor na die inhoud van die stylblad. Dit implementeer die volgende skema: die hoofbladsyblok sal op 100% hoogte gestel word, die titel sal absoluut geposisioneer wees en die voetskrif is relatief. Om te verhoed dat die opskrif die hoofinhoud van die bladsy oorvleuel, word hierdie hoofinhoud in 'n bykomende blokkie in die hoofvak geplaas, en hierdie bykomende venster is ingestel op 'n boonste kantlyn gelyk aan die hoogte van die opskrifvak. En die voetskrif kry 'n negatiewe boonste kantlyn wat gelyk is aan die hoogte - op hierdie manier word dit bo die onderste rand van die venster opgehef tot sy volle hoogte. Volledige inhoud van die css-lêer: * {margin: 0; opvulling: 0}
html, liggaam {hoogte: 100%;} liggaam {
kleur: swart;
posisie: relatief;
}
#outer {
min-hoogte: 100%;
marge: 0;
agtergrond: wit;
kleur: swart;
} * html #outer {hoogte: 100%;}
#header {
posisie: absoluut;
bo: 0;
links: 0;
breedte: 100%;
hoogte: 70px;
agtergrond: # 304a00;
oorloop: verborge;
kleur: wit;
teksbelyning: middel;
} #voeter {
posisie: relatief;
marge-top: -50px;
duidelik: albei;
breedte: 100%;
hoogte: 50px;
agtergrondkleur: # 304a00;
kleur: wit;
teksbelyning: middel;
}
.outerwrap {
dryf: links;
breedte: 100%;
padding-top: 71px;
} Hierdie lêer moet gestoor word met die naam wat ons in die html-kode van die bladsy - styles.css gespesifiseer het.
