Dalam tutorial saya sebelumnya " Tata Letak Kotak Sembilan Gong yang Tidak Dapat Dipecahkan ", saya memperkenalkan metode tata letak kotak sembilan persegi yang relatif sempurna, yang dapat secara fleksibel menyesuaikan lebar dan tinggi untuk mencapai gaya tata letak yang lebih fleksibel.
Namun, untuk mencerminkan fungsi elastis secara sempurna, harga yang harus dibayar masih sangat mahal. Dari sudut pandang struktural, strukturnya relatif membengkak, tetapi setiap node sangat diperlukan dan tidak dapat dirampingkan, jika tidak maka akan menyebabkan fleksibilitasnya. tidak cukup.
Dalam penerapan praktis, banyak desainer mungkin tidak menyukai struktur tata letak ini dan menganggapnya mubazir.
Desain kisi sembilan persegi yang sempurna harus berupa struktur terpisah tiga lapis. Grid sembilan persegi ideal yang ingin saya capai harus seperti ini:
Oleh karena itu, pada artikel kali ini saya akan mencoba membawa layout ini sedekat mungkin dengan keadaan ideal tersebut, sehingga lebih cocok untuk diterapkan dalam berbagai aspek.
Mengenai poin pertama dan kedua, jika Anda ingin mempertahankan fleksibilitasnya dan mendapatkan efek streamline, artinya jika Anda ingin "memiliki kue dan memakannya juga", tidak ada cara lain selain menggunakan enkapsulasi js. Bisa dibilang ini semacam pendekatan "menyembunyikan telinga dan mencuri bel". Ya, saya harus mengakui bahwa metode enkapsulasi dengan JS ini pada intinya tidak menyederhanakan strukturnya, tetapi hanya menggunakan cara dinamis untuk merangkumnya. struktur. Buat, tetapi ini memiliki efek langsung pada struktur html yang berlebihan, dan semua struktur yang berlebihan tidak terlihat dalam satu gerakan.
Mari pelajari cara meningkatkan kisi sembilan persegi dari pendekatan pemisahan tiga lapis.
Lapisan struktural :
Ini adalah area utama yang ingin kami sederhanakan sebanyak mungkin. Kami menggunakan js untuk membuat strukturnya secara dinamis, sehingga struktur saat ini harus menjadi struktur paling orisinal sebagai berikut:
Kotak sembilan persegi pertama
Kotak sembilan persegi kedua
Kotak sembilan persegi ketiga
Satu-satunya modifikasi yang saya buat adalah menambahkan ID yang berbeda ke setiap kotak, yang meninggalkan kaitan untuk memanggil style sheet guna menciptakan warna yang berbeda nanti. Gunakan ID ini untuk membuat gambar atau gaya warna berbeda di style sheet.
Kita hanya perlu menambahkan class="box" ke wadah div, dan tata letak kotak sembilan persegi akan berhasil dibuat. Ini cukup sederhana!
Lapisan gaya:
Baru saja kami mengubur titik terobosan dalam menyesuaikan gaya (ID yang berbeda) di lapisan struktur, sehingga menulis gaya menjadi lebih mudah. Kami mengganti dan mengatur ulang gaya dari kesembilan tempat di mana gaya perlu diubah untuk mendapatkan gaya yang berbeda.
Tentu saja, Anda dapat menerapkan gambar yang berbeda ke latar belakang sebagai latar belakangnya. Saya baru saja menyebutkan nilai warna untuk kenyamanan demonstrasi. Gaya antarmuka spesifik bergantung pada keahlian desain Anda.
/*Skema warna satu*/
#satu .t_l{latar belakang:biru;}
#satu .t_r{latar belakang:biru;}
#satu .t_m{latar belakang:oranye;}
#satu .m_l{latar belakang:oranye;}
#satu .m_r{latar belakang:oranye;}
#satu .b_l{latar belakang:biru;}
#satu .b_r{latar belakang:biru;}
#satu rentang .b_m{background:orange;}
#satu .context{latar belakang:#666;}
/*Skema warna dua*/
#dua .t_l{latar belakang:merah;}
#dua .t_r{latar belakang:merah;}
#dua .t_m{latar belakang:hitam;}
#dua .m_l{latar belakang:hitam;}
#dua .m_r{latar belakang:hitam;}
#dua .b_l{latar belakang:merah;}
#dua .b_r{latar belakang:merah;}
#dua .b_m span{background:black;}
#dua .context{background:#999;}