Dalam tiga seri artikel sebelumnya, saya memberikan pengenalan mendetail tentang tata letak kotak sembilan persegi. Mari kita mulai dengan tata letak dasar dan menjelaskan masalah yang dihadapi selama proses produksi satu per satu. Ketiga artikel ini semuanya merupakan penjelasan dari prinsip-prinsip dasar. Tidak ada kasus penerapan yang kuat untuk membuktikan apakah prinsip ini benar. Oleh karena itu, dalam artikel ini saya akan memperkenalkan kasus Jiugongge - pemain yang sangat keren.
Dalam artikel ketiga saya "Kotak Sembilan Gong Sempurna dengan Tiga Lapisan Pemisahan", saya memperkenalkan penggunaan JS untuk merangkum tag html guna mengurangi struktur yang berlebihan, tetapi metode ini juga memiliki kelemahan. Jika pengguna menonaktifkan JS, Ini akan menyebabkan struktur tersebut tidak akan ditampilkan sama sekali. Tentu saja, untuk kondisi Internet saat ini, hal ini seharusnya tidak menjadi masalah besar, namun melihat beberapa desain halaman web asing, pertimbangan ini perlu dilakukan. Hal ini memerlukan downgrade yang baik dan pelemahan fungsional, namun hasilnya sama dengan tidak menggunakan enkapsulasi JS. Oleh karena itu, Anda tidak dapat memiliki kue dan memakannya juga. Hei, ini semua penyimpangan, mari kita lihat bagaimana salah satu pemain keren kita didesain!
Kesan pertama didahulukan, semua ingin melihat hasilnya dulu, oke, kita tampilkan screenshotnya dulu:
Gambar 1
Umumnya, untuk pemain yang penuh warna, nilai lebar dan tinggi harus disesuaikan secara dinamis, jadi menggunakan kotak sembilan persegi untuk grafik semacam itu adalah pilihan yang sangat cocok.
Tentu saja, saya tidak akan mengulangi prinsipnya. Silakan lihat " Tata Letak Kotak Sembilan Gong yang Tidak Dapat Dipecahkan " dalam rangkaian artikel saya. Tentu saja, masih ada beberapa teknik dalam produksi yang dapat membantu kita menyelesaikan tugas dengan lebih baik. Misalnya, teknologi css sprite (Anda dapat melihat artikel saya yang lain " teknologi pengoptimalan latar belakang gambar sprite css ") dapat secara menguntungkan mengurangi jumlah permintaan gambar. Secara umum, untuk aplikasi dengan tata letak kotak sembilan persegi, terdapat lebih banyak gambar, karena Dibutuhkan setidaknya delapan gambar untuk menghiasi keempat sudut dan empat sisinya. Oleh karena itu, cara mengurangi jumlah gambar menjadi hal yang harus dipertimbangkan oleh desainer.
Dalam contoh ini saya menggabungkan keempat gambar sudut menjadi satu gambar, sehingga akan terlihat seperti ini:
Gambar 2
Pada gambar di atas, agar semua orang dapat melihat dengan lebih cermat, saya menggambar persimpangan beberapa gambar dengan garis bantu. Kami menerapkan prinsip penempatan gambar untuk memasangnya di keempat sudut. Mereka didefinisikan dalam style sheet sebagai berikut:
.t_l{ background:url(../image/round.gif) tidak ada pengulangan di kiri atas;}
/*pojok kiri atas*/
.t_r{background:url(../image/round.gif) tidak ada pengulangan di kanan atas;}
/*pojok kanan atas*/
.b_l{background:url(../image/round.gif) tanpa pengulangan di kiri bawah;}
/*pojok kiri bawah*/
.b_r{ background:url(../image/round.gif) tidak ada pengulangan di kanan bawah;}
/*Pojok kanan bawah*/