Mari lihat reka bentuk grid laman web ini dan pecahkan komponen masing-masing. Mari terokai mengapa apungan sangat berguna, serta teknik yang popular untuk membina jaringan web pertama dari tiga aliran dan footer laman web.
Untuk mengkaji pembinaan grid laman web, anda perlu memahami apa itu "aliran". Aliran adalah elemen laman web, terletak satu demi satu. Contohnya, ini boleh menjadi elemen div yang satu demi satu secara lalai. Tetapi aliran dapat disusun semula, dan kedudukan elemen blok dapat diubah.
Untuk mengawal aliran, kami menggunakan harta apungan, yang dapat meletakkan blok di sebelah kiri atau kanan. Cukup untuk menulis dalam fail CSS:
"nama kelas atau blok" {float: kanan / kiri; }
Satu-satunya kelemahan apungan adalah keupayaan untuk "bertindih" satu blok di atas blok yang lain.
Untuk mengelakkan berlari, kami menggunakan jelas: kedua - harta ini akan mengatur aliran di sekitar blok. Kami menetapkan lebar dan tinggi, sebagai maksimum dan minimum, sehingga nilainya dibentuk sesuai dengan ukuran isi (teks, gambar). Margin - tetapkan nilainya ke automatik supaya margin luaran terbentuk secara automatik bergantung pada lokasi blok.
Oleh kerana float dapat menempatkan blok dalam dua arah, adalah kebiasaan untuk membahagikan laman web ke dalam aliran - kiri dan kanan. Sekiranya pengaturcara hanya memerlukan dua aliran, maka dia meninggalkan pelampung kiri dan kanan, tetapi jika ada lebih dari dua, maka dia menyesuaikan margin menggunakan margin. Bagaimana ini berlaku:
.column1 {apungan: kiri; lebar: 65px; ketinggian min: 50 piksel; margin-kanan: 9 piksel; // 9px dari kotak tengah}
2 aliran:
.column2 {float: kiri; // ke blok kiri, tetapi tanpa "tumpang tindih", kerana kami menggunakan lebar margin: 80px; ketinggian min: 50 piksel; }
3 aliran:
.column3 {apungan: kanan; lebar: 65px; ketinggian min: 50 piksel; }
Berurusan dengan footer (.footer):
.footer {jelas: kedua-duanya; // bungkus kedua-dua belah pihak}
Ini adalah bagaimana kami membuat grid untuk laman web menggunakan float, yang terdiri dari tiga aliran.
