CSS menggunakan ul untuk tata letak halaman web multi-kolom

Penulis：Eve Cole Waktu Pembaruan：2009-05-31 01:02:37

Saya tiba-tiba memikirkan metode ini ketika saya sedang menulis tata letak tiga kolom dengan CSS beberapa hari yang lalu. Ide ini sepertinya agak gila bagi saya. Jika ada yang salah dengan itu, silakan beri saya saran.

Ketika saya perlu menulis tata letak tiga kolom, saya biasanya memilih untuk menggunakan metode tata letak DIV berikut:

Menggunakan metode bersarang seperti itu tidak diragukan lagi dapat mengurangi banyak kemungkinan kesalahan kode, tetapi pada saat yang sama, tata letak seperti itu juga sedikit rumit dan sedikit merepotkan untuk pemeliharaan selanjutnya. Metode yang sering kita gunakan saat menata letak navigasi adalah dengan menggunakan daftar <ul> untuk tata letak. Navigasi dapat digambarkan sebagai tata letak multi-kolom. tata letak kolom.

Ini adalah tata letak dengan lebar tetap, artinya tidak terlalu lancar. Tata letak yang lancar belum diuji. Saya akan mencobanya lagi ketika saya punya waktu. Tempelkan kode tata letak ini di bawah.

<!DOCTYPE html PUBLIK “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml”>
<kepala>
<meta http-equiv=”Jenis Konten” content=”teks/html; charset=utf-8″ />
<title>Menggunakan UL untuk tata letak multi-kolom</title>
<gaya tipe="teks/css">
* {margin:0; bantalan:0;}
tubuh {
lebar:100%;
tinggi:100%;
latar belakang:#ddedfb;
}
#Konten Utama {
lebar:600 piksel;
margin:10px otomatis;
}
#header,#footer {
latar belakang:#8AC7FA;
tinggi:80 piksel;
jelas: keduanya;
}
#footer {
jelas: keduanya;
padding-atas:10px;
}
#isi {
tinggi:300 piksel;
margin:10px otomatis;
}
#konten {
gaya daftar: tidak ada;
tinggi:100%;
}
#kontenulli{
lebar:150 piksel;
tinggi:100%;
latar belakang:#8AC7FA;
mengapung:kiri;
}
#contentulli#li2 {
lebar:280 piksel;
margin:0 10 piksel;
}
#konten ul li#li2 ul li {
lebar:270 piksel;
tinggi:140 piksel;
margin:5 piksel;
latar belakang:#0581F0;
}
</gaya>
</kepala>

<tubuh>
<div id="Konten Utama">
<div id="header">Ini headernya</div>
<div id="konten">
<ul>
<li>Ini sisi kiri</li>
<li id="li2″>
<ul>
<li>Ini adalah bagian tengah atas</li>
<li>Ini adalah bagian bawah di tengah</li>
</ul>
</li>
<li>Ini adalah sisi kanan</li>
</ul>
</div>
<div id="footer">Ini bagian bawah</div>
</div>
</tubuh>
</html>

Kode ini dapat ditampilkan secara normal di IE7 dan FF3. Kode ini belum diuji di browser lain. Jika Anda memiliki metode yang lebih baik, mohon sarankan.