Beberapa tahun yang lalu, DIV+CSS mulai secara bertahap menjadi metode desain web yang disukai. Saat ini, DIV+CSS telah menjadi standar untuk desain web dalam beberapa tahun terakhir bertahun-tahun. . Penulis juga seorang desainer web yang lebih menyukai metode ini. Saya telah menggunakan div+css untuk menyediakan desain bagi pelanggan selama tiga tahun. Lalu apa kelebihannya dibandingkan TABLE? Mari kita bahas beberapa pengalaman dan pemahaman pribadi, semoga dapat bermanfaat bagi rekan kerja dan personel terkait.
Keuntungan terbesar menggunakan DIV+CSS dalam desain web adalah untuk menstandardisasi kode web, meninggalkan metode tata letak tabel yang sudah ketinggalan zaman, dan menyadari pemisahan antara konten, kinerja, dan perilaku. Kode html lebih terstruktur dan lebih mudah dibaca dan dipelihara. dan ukuran file halaman web juga lebih kecil. Misalnya, setelah rekonstruksi situs web klien baru-baru ini, ukuran file halaman web kurang dari setengah ukuran aslinya, sehingga menggunakan lebih sedikit ruang situs web dan situs web dibuka lebih cepat.
Metode DIV+CSS dan TABLE sangat berbeda dalam desain. Perencanaan yang cermat diperlukan sebelum mulai mendesain halaman web, seperti memberi nama elemen yang membentuk halaman web untuk memfasilitasi definisi gaya dalam CSS . Gaya umum seluruh situs web dapat ditempatkan dalam file css terpisah. Atribut umum umum meliputi: lebar halaman web, warna latar belakang, gambar latar belakang, ukuran default font, warna, gaya tautan, dll. Gaya berbeda untuk setiap halaman web ada di dalamnya. file css. Yang terbaik adalah fokus pada satu blok dan menunjukkan halaman web atau bagian halaman web mana sebelum blok. Ini tidak hanya akan mengurangi ukuran file CSS, tetapi juga menghindari kebingungan dan membuat pemeliharaan lebih mudah. Perlu disebutkan bahwa gaya tidak boleh disematkan dalam kode halaman web untuk memisahkan konten dan gaya sepenuhnya.
Untuk melakukan pekerjaan dengan baik dalam desain web DIV+CSS, ada tiga poin yang perlu dipahami.
1. Atribut float: DIV (lapisan) menempati seluruh baris secara default. Untuk desain tata letak dua kolom atau multi-kolom yang umum, Anda harus dapat mengatur atribut float dan lebar dengan benar untuk mencapai efeknya. Setelah tata letak multi-kolom selesai, jika diikuti lapisan yang menempati spanduk, Anda perlu mengatur atribut clear untuk menghapus lapisan mengambang.
2. Mode kotak: Lapisan memiliki atribut seperti lebar, tinggi, batas, jarak dalam, dan jarak luar. Ruang sebenarnya yang ditempati oleh lapisan adalah jumlah dari nilai atribut di atas. Penggunaan yang tepat dari atribut ini dapat mencapai kekompakan dan tata letak yang elegan. Tata letak web yang indah.
3. Lapisan bersarang: Semua desainer web berpengalaman tahu bahwa tidak disarankan untuk membuat terlalu banyak lapisan, umumnya tidak lebih dari 3 lapisan. Terlalu banyak lapisan akan menyebabkan kode yang rumit dan berlebihan, kesulitan dalam pemeliharaan, dan pengoperasian yang lambat. Selain itu, dalam tata letak multi-kolom, lapisan mengambang dapat digunakan, dan tidak perlu menyiapkan lapisan IE secara keseluruhan untuk penyematan.
Sebutkan topik kompatibilitas browser secara terpisah. Dibandingkan dengan tata letak TABLE, DIV+CSS lebih rentan terhadap masalah ketidakcocokan dengan banyak browser. Alasan utamanya adalah bahwa browser yang berbeda memiliki nilai default yang berbeda untuk standar web. Arus utama di Cina adalah IE, dengan Firefox dan Chrome kurang umum digunakan. Dalam hal pengujian kompatibilitas, pertama-tama Anda harus memastikan bahwa tidak ada masalah yang terjadi di beberapa versi IE masalah di situs web.
Ringkasan: DIV+CSS memiliki banyak keunggulan dibandingkan TABLE. Desainer web harus meninggalkan metode TABLE sesegera mungkin, yang akan lebih kondusif untuk mendorong diri mereka sendiri mempelajari pengetahuan DIV+CSS secara mendalam. Tidak sulit untuk mempelajari dan menggunakan metode desain web DIV+CSS, selama Anda memahami beberapa pengetahuan dasar dan melakukan beberapa kasus lagi, Anda secara bertahap akan memahami dan menguasainya.
Artikel ini diterbitkan oleh [Hippie], webmaster http://www.swjns.com . Harap simpan URL untuk dicetak ulang.
Terima kasih kepada hbjsp atas kontribusi Anda