Blok paling bawah mendatar susun atur halaman sering disebut sebagai "footer". Di dalamnya, seperti pada blok halaman lain, elemen reka bentuk diletakkan, tetapi tidak seperti yang lain, masalah khusus sering timbul dengan kedudukan blok tertentu ini. Mereka dihubungkan dengan kenyataan bahawa penyemak imbas yang berbeza memahami standard bahasa CSS secara berbeza dan agak sukar untuk mendapatkan footer berada di tepi bawah tetingkap penyemak imbas. Berikut adalah kod untuk salah satu penyelesaian untuk masalah ini.
Perlu
Pengetahuan asas mengenai CSS dan HTML
Arahan
Langkah 1
Pada baris pertama kod sumber halaman, letakkan rujukan ke spesifikasi Peralihan XHTML 1.0:
Langkah 2
Letakkan blok utama struktur halaman di dalam badan dokumen (antara dan tag). Blok di mana kandungan utama akan diletakkan mesti terdiri daripada dua lapisan bersarang. Sebagai contoh, biarkan bahagian luar mempunyai pengecam OuterDiv, dan yang dalam - InnerDiv:
Di sinilah kandungan utama halaman akan berada.
Di belakangnya letakkan blok footer dengan pengecam, sebagai contoh, FooterDiv:
Bahagian bawah halaman.
Langkah 3
Letakkan di bahagian kepala kod HTML (antara dan tag) pautan ke fail luaran dengan keterangan gaya css:
@import "footerStyle.css";
Langkah 4
Simpan kod halaman induk yang lengkap ke fail dengan sambungan html. Mungkin kelihatan seperti ini:
Footer ditekan
@import "footerStyle.css";
Di sinilah kandungan utama halaman akan berada.
Bahagian bawah halaman.
Langkah 5
Buat file stylesheet - fail teks biasa yang harus disimpan dengan pelanjutan css dan nama yang anda tentukan dalam kod HTML (footerStyle.css). Tulis ke fail ini deskripsi gaya berikut untuk blok yang digunakan di halaman:
* {margin: 0; pembalut: 0}
html, badan {tinggi: 100%;}
badan {
kedudukan: saudara;
warna: # 222222;
}
#OuterDiv {
margin: 0;
ketinggian min: 100%;
latar belakang: #aaaaaa;
warna: # 222222;
}
* html #OuterDiv {tinggi: 100%;}
#FooterDiv {
kedudukan: saudara;
jelas: kedua-duanya;
margin-top: -60 piksel;
tinggi: 60 piksel;
lebar: 100%;
warna latar: DarkBlue;
text-align: tengah;
warna: #eeeeff;
}
. InnerDiv {
lebar: 100%;
terapung: kiri;
}
