Lapas izkārtojuma apakšējo un horizontālo bloku bieži sauc par "kājeni". Tajā, tāpat kā citos lapas blokos, tiek izvietoti dizaina elementi, taču atšķirībā no citiem īpašas problēmas bieži rodas ar šī konkrētā bloka pozicionēšanu. Tie ir saistīti ar faktu, ka dažādas pārlūkprogrammas atšķirīgi izprot CSS valodas standartus un var būt diezgan grūti panākt, lai kājene atrodas pārlūkprogrammas loga apakšējā malā. Zemāk ir kods vienam no šīs problēmas risinājumiem.
Nepieciešams
Pamatzināšanas par CSS un HTML
Instrukcijas
1. solis
Lapas pirmkoda pirmajā rindiņā ievietojiet atsauci uz XHTML 1.0 pārejas specifikāciju:
2. solis
Novietojiet galvenos lapas struktūras blokus dokumenta pamattekstā (starp un tagiem). Blokam, kurā tiks ievietots galvenais saturs, jāsastāv no diviem ligzdotiem slāņiem. Piemēram, ļaujiet ārējam identifikatoram OuterDiv, bet iekšējam - InnerDiv:
Šeit būs lapas galvenais saturs.
Aiz tiem novietojiet kājenes bloku ar identifikatoru, piemēram, FooterDiv:
Lapas kājene.
3. solis
HTML koda galvenajā daļā (starp tagiem un tagiem) ievietojiet saiti uz ārēju failu ar css stilu aprakstu:
@import "footerStyle.css";
4. solis
Saglabājiet pilnu galvenās lapas kodu failā ar HTML paplašinājumu. Tas varētu izskatīties šādi:
Piespiesta kājene
@import "footerStyle.css";
Šeit būs lapas galvenais saturs.
Lapas kājene.
5. solis
Izveidojiet stila lapas failu - vienkārša teksta failu, kas jāsaglabā ar paplašinājumu css un HTML kodā norādīto nosaukumu (footerStyle.css). Šajā failā ierakstiet šādus lapā izmantoto bloku stilu aprakstus:
* {starpība: 0; polsterējums: 0}
html, body {augums: 100%;}
ķermenis {
amats: radinieks;
krāsa: # 222222;
}
#OuterDiv {
starpība: 0;
min-augstums: 100%;
fons: #aaaaaa;
krāsa: # 222222;
}
* html #OuterDiv {augstums: 100%;}
#FooterDiv {
amats: radinieks;
skaidrs: abi;
margin-top: -60px;
augstums: 60px;
platums: 100%;
fona krāsa: DarkBlue;
text-align: center;
krāsa: #eeeeff;
}
. InnerDiv {
platums: 100%;
pludiņš: pa kreisi;
}
