CSS Layout Cairan Elastis Memenuhi Tampilan Konten yang Berbeda

Saat ini, ketika monitor pengguna semakin besar, tata letak lebar solid 1024*768 sebelumnya menjadi semakin tidak pada tempatnya. Limbah layar, sebagai perancang web, Anda memiliki tanggung jawab untuk memberi kelompok pengguna ini antarmuka pengguna yang baik.

Tentu saja, untuk mengurangi pemborosan layar seperti ini, mengadopsi tata letak cairan elastis adalah solusi terbaik. Namun, karena berbagai batasan, halaman web saat ini tidak sepenuhnya dilengkapi dengan kondisi untuk sepenuhnya mengadopsi tata letak elastis cairan (terutama penghancuran standar yang tidak bermoral oleh produsen browser dan dukungan tidak lengkap dari standar CSS, dll.). Sebagai perantara antara pengguna dan produsen, kami hanya dapat beradaptasi dengan kesenjangan antara keduanya dengan sikap yang kompatibel. Jadi, sebagai solusi transisi, ada tata letak seperti itu: tata letak lebar elastis + padat.

Elastisitas yang disebutkan di sini mengacu pada latar belakang yang beradaptasi dengan lebar layar, sedangkan lebar padat berarti bahwa konten utama dapat secara otomatis berpusat di layar lebar dan layar sempit. Bertahan dalam kesenjangan untuk memenuhi kebutuhan pengguna dengan berbagai ukuran dan resolusi. Desain yang ditunjukkan pada gambar di bawah ini adalah contoh khas.

Mari kita bicara lebih sedikit omong kosong dan kembali ke intinya, mari kita buat struktur tata letak seperti itu.

Pertama membangun lapisan struktural:

Mari kita analisis lapisan struktur. Untuk merancang dengan cara ini?

Kami mengatur wadah pembungkus dan footer ke lebar 100% untuk secara otomatis beradaptasi dengan lebar layar. Dan juga mengatur area header header ke lebar 100%. Dengan cara ini, kita dapat memasukkan gambar ubin horizontal ke header dan footer, sehingga latar belakang header dan footer dapat secara horizontal mengisi seluruh ruang layar di bawah layar besar.

Sebagai konten utama, pendekatan umum kami adalah membiarkannya berpusat dan meninggalkan kosong di kedua sisi ketika resolusi menjadi lebih besar. Karena area header telah ditetapkan ke lebar 100%, kami menambahkan inheader lapisan wadah ke header, yang berfungsi sebagai pembawa konten teks header asli. Biarkan pusatnya secara otomatis.

Dengan cara ini, teks header mengapung lapisan atas haeader.

Dengan cara yang sama, footer juga dapat diimplementasikan dengan cara ini.

Di lapisan struktur di atas, saya tidak menggunakan metode ini di area konten tengah, tetapi membuat sedikit solusi. Apa yang harus kita lakukan jika kita tidak terlihat terlalu hampa di kedua sisi teks di bawah resolusi besar? Tentu saja, untuk mengurangi sarang, kita dapat mengadopsi solusi. Kita dapat menambahkan gambar yang terlalu besar ke latar belakang dalam tubuh dan menggunakan posisi latar belakang untuk memposisikan gambar di tengah, sehingga gambar di kedua sisi area konten akan ditampilkan.

Blog ini adalah kasus tertentu. dan konten teks selalu ditampilkan di tengah.

Untuk menunjukkan efeknya, kami menambahkan beberapa penyesuaian warna lainnya, dan gaya terakhir adalah sebagai berikut: