Kotak sembilan persegi adalah desain yang relatif lama. Performa paling mendasarnya sebenarnya seperti tabel dengan tiga baris dan tiga kolom. Faktanya, ini awalnya lebih banyak digunakan dalam struktur jendela C/S. Misalnya, kita sering melihat formulir di perangkat lunak, yang sebenarnya merupakan aplikasi khas dari kotak sembilan persegi dalam delapan arah, jadi pada tahun Teknologi ini banyak digunakan dalam perangkat lunak C/S untuk desain tata letak. Dalam masyarakat saat ini di mana sistem B/S populer, tata letak ini secara bertahap digunakan oleh beberapa desainer web di halaman web. Yang paling umum digunakan adalah tata letak kotak sudut membulat.
Gambar berikut menunjukkan tata letak dasar Grid Sembilan Istana:
Terlihat pada gambar di atas, setiap baris terdapat tiga kolom, dimana kotak biru merupakan pojok atas, keempat balok tersebut merupakan bidang yang lebar dan tingginya tetap, dan keempat bidang kuning tersebut merupakan keempat sisinya yang disusun mendatar. atau ubin vertikal, sedangkan area oranye di tengah merupakan area utama untuk memuat konten.
Struktur seperti ini paling kondusif untuk perluasan otomatis lebar dan tinggi area konten sesuai dengan resolusi layar yang berbeda. Struktur semacam ini juga merupakan struktur tata letak yang paling diinginkan oleh desainer web.
Mari kita terapkan di bawah ini:
Lapisan struktural :
Karena harus beradaptasi dengan peregangan di delapan arah, setiap arah diterapkan dengan div. Jika ada yang hilang, fleksibilitasnya tidak mencukupi. Kemudian berdasarkan prinsip ini kita dapat memperoleh struktur sebagai berikut:
Lapisan gaya :
Berdasarkan strukturnya, kita dapat menulis gaya dasarnya. Prinsip dasar penerapannya adalah menyetel total container.box ke posisi relatif dan menyetel overflow:hidden; sehingga semua area di luarnya terpotong, dan div di delapan arah di dalamnya disetel ke posisi absolut, dan z -nya - Indeks diatur ke 2, dan kemudian empat kontainer sudut diatur ke empat sudut masing-masing.
.box{overflow:hidden;posisi:relatif;}
.t_l,.t_m,.t_r,.b_l,.b_m,.b_r,.m_l,.m_r {posisi:absolute;z-index:2;}
<div kelas="kotak">
<div kelas="t_l"></div>
<div kelas="t_m"></div>
<div kelas="t_r"></div>
<div kelas="m_l"></div>
<div class="m_m">Area konten</div>
<div kelas="m_r"></div>
<div kelas="b_l"></div>
<div kelas="b_m"></div>
<div kelas="b_r"></div>
</div>