Beginilah cara saya membuat kode tata letak DIV. Saya tidak tahu apakah sudah jelas atau tidak.
Ide saya adalah di masa depan, kita dapat menggunakan komponen standar untuk menyusun tata letak DIV halaman web
Kelas saya bagi menjadi dua jenis, kelas tata letak dan kelas gaya adalah kelas kerangka dan kelas gaya adalah pakaian.
Misalnya:
Misalnya kolom kiri pada layout
Pertama-tama, propertinya adalah: kolom kiri, lebar, warna latar belakang, warna font, dll.
1． Pertama, kelas akan ditentukan, seperti: .layout, yang terutama digunakan untuk mengontrol seluruh ukuran halaman.
.layout{width:98%;margin:0 otomatis;perataan teks:kiri;}
2. Kemudian 3 tata letak dasar Kelas(l,m,r) akan ditentukan
.l{mengambang:kiri}
.m{lebar:otomatis}
.r{mengambang:kanan}
Saya juga mengelompokkan layout 2 kolom ke dalam layout 3 kolom, karena pada layout 3 kolom, bila lebar kolom kiri dan kanan 0, 3 kolom menjadi 2 kolom.
Saat kita menulis kode tata letak dasar, yang terbaik adalah menulisnya dalam format 3 kolom.
3. Sesuai dengan Kelas tata letak, tentukan Kelas gaya yang diperlukan, seperti lebar, tinggi, warna latar belakang, dll. Ini semua adalah elemen gaya.
.class_l{latar belakang:#ff0;margin-kanan: -150px;lebar:150px;}
.class_m{latar belakang:#f00;margin:0 140px 0 150px;}
.class_r{latar belakang:#00f;margin-kiri: -140px;lebar:140px;}
Hanya ada satu set kelas tata letak, tetapi banyak kelas gaya yang dapat ditentukan.
Misalnya, Anda ingin membuat layout dua kolom kecil di kolom tengah.
Anda dapat menentukan kelas gaya lain
.mid_l{latar belakang:#ff0;margin-kanan: -100px;lebar:100px;}
.mid_m{latar belakang:#f00;margin:0 0 0 100 piksel;}
4. Gabungkan kelas tata letak dan kelas gaya dan referensikan keduanya dalam kode seperti ini
<kelas div=l kelas＿l></div>
<kelas div=l pertengahan_l></div>
Kutip kedua kelas, dipisahkan dengan spasi. Yang pertama adalah kelas tata letak, dan yang kedua adalah kelas gaya. Anda dapat terus mengutip kedua kelas dengan spasi id untuk didefinisikan.
Beberapa kelas gaya lain yang umum digunakan juga dapat ditulis sebagai universal, misalnya implisit dapat didefinisikan sebagai
.hide{tampilan:tidak ada}
Kemudian bila diperlukan, gunakan class=xxx hide untuk mereferensikannya, yang sangat nyaman.
Kode: