Die onderste horisontale blok van 'n bladsy-uitleg word dikwels 'footer' genoem. Daarin, soos in ander blokke van die bladsy, word ontwerpelemente geplaas, maar in teenstelling met ander, kom daar dikwels spesifieke probleme met die posisionering van hierdie spesifieke blok voor. Dit hang saam met die feit dat verskillende blaaiers die standaarde van die CSS-taal anders verstaan en dat dit nogal moeilik kan wees om die onderkant aan die onderkant van die blaaiervenster te bevind. Hieronder is die kode vir een van die oplossings vir hierdie probleem.
Nodig
Basiese kennis van CSS en HTML
Instruksies
Stap 1
Plaas in die heel eerste reël van die bladsy se bronkode 'n verwysing na die XHTML 1.0-oorgangsspesifikasie:
Stap 2
Plaas die hoofblokke van die bladsystruktuur in die liggaam van die dokument (tussen die en die etikette). Die blok waarin die hoofinhoud geplaas moet word, moet uit twee geneste lae bestaan. Laat die buitenste byvoorbeeld die identifiseerder OuterDiv en die innerlike hê - InnerDiv:
Dit is hier waar die hoofinhoud van die bladsy sal wees.
Agter hulle plaas 'n voetskrifblok met 'n identifiseerder, byvoorbeeld FooterDiv:
Voetskrif van die bladsy.
Stap 3
Plaas 'n skakel na die eksterne gedeelte van die HTML-kode (tussen die en die tags) met 'n beskrywing van CSS-style:
@import "footerStyle.css";
Stap 4
Stoor die volledige hoofbladsy-kode in 'n lêer met die html-uitbreiding. Dit kan soos volg lyk:
Voetskrif gedruk
@import "footerStyle.css";
Dit is hier waar die hoofinhoud van die bladsy sal wees.
Voetskrif van die bladsy.
Stap 5
Skep 'n stylvel-lêer - 'n gewone tekslêer wat gestoor moet word met die css-uitbreiding en die naam wat u in die HTML-kode (footerStyle.css) gespesifiseer het. Skryf die volgende stylbeskrywings in hierdie lêer vir die blokke wat op die bladsy gebruik word:
* {marge: 0; opvulling: 0}
html, liggaam {hoogte: 100%;}
liggaam {
posisie: relatief;
kleur: # 222222;
}
#OuterDiv {
marge: 0;
min-hoogte: 100%;
agtergrond: #aaaaaa;
kleur: # 222222;
}
* html #OuterDiv {hoogte: 100%;}
# VoetbalDiv {
posisie: relatief;
duidelik: albei;
marge-top: -60px;
hoogte: 60px;
breedte: 100%;
agtergrondkleur: donkerblou;
teksbelyning: middel;
kleur: #eeeeff;
}
. InnerDiv {
breedte: 100%;
dryf: links;
}
