Klik di sini untuk kembali ke kolom tutorial Wulin.com HTML. Jika Anda ingin menelusuri tutorial CSS, silakan klik di sini.
Atas: Bahasa Markup - Penggantian Gambar . Bab 15 Tentukan Gaya untuk <Body>
Salah satu manfaat mengatur konten dan efek tampilan secara terpisah adalah fleksibilitas. Dengan menggunakan CSS untuk mengontrol tata letak situs web (metode yang digunakan dalam Bab 12), Anda dapat mengontrol elemen desain seluruh situs web, mengubah beberapa aturan, dan segera memperbarui ribuan halaman secara dramatis.
Salah satu contoh kenyamanan menggunakan CSS untuk mengontrol tata letak adalah menentukan gaya untuk <body>, dan dengan menambahkan kelas atau ID ke tag <body>, Anda dapat menyesuaikan tag apa pun di halaman. Tidak ada masalah dengan definisi berulang sama sekali.
Dalam bab ini, kami akan mengeksplorasi cara menggunakan struktur tag untuk mengganti dua konfigurasi tata letak yang berbeda dengan menambahkan kelas ke tag <body>. Tata letak dua kolom atau tiga kolom.
Sama seperti ketika mendesain ulang situs web untuk perusahaan cepat menggunakan teknologi tata letak CSS, salah satu tantangannya adalah: Meskipun semua halaman berbagi navigasi yang sama dan akhir halaman, dua tata letak yang berbeda juga diperlukan.
Tata letak pertama adalah halaman indeks (halaman beranda), lihat Gambar 15-1. Ini adalah halaman dengan fungsi navigasi, memungkinkan pengguna untuk terus menembus struktur direktori situs web. Kami memutuskan untuk menggunakan tata letak tiga kolom untuk halaman-halaman ini.
Gambar 15-1 Demonstrasi Halaman Indeks Tiga Kolom Perusahaan Cepat
Tata letak halaman kedua adalah halaman internal Gambar 15-2. Halaman apa pun yang terasa seperti tujuan menggunakan tata letak tata letak ini. Untuk meningkatkan keterbacaan, kami memutuskan untuk menghilangkan kolom kiri dan meninggalkan dua kolom, yaitu, satu kolom besar menempatkan konten dan yang lainnya menempatkan iklan.
Gambar 15-2 Demonstrasi Halaman Teks Dua Kolom Perusahaan Cepat.
Alasan saya menjelaskan ini bukan untuk membuktikan bahwa kami telah memecahkan misteri besar tata letak tertentu, tetapi untuk menunjukkan bahwa menambahkan kelas ke tag <body> dapat menyesuaikan lebar kolom, dan menempatkan atau menghilangkan kolom ketiga sesuai dengan bentuk halaman. Saat membuat efek seperti itu, tidak ada aturan yang diulang sama sekali, dan tidak ada lembar gaya tambahan yang diperkenalkan. Tanda dan struktur gaya ditambahkan.
Setelah mulai menggambarkan struktur penandaan yang dibagikan oleh dua halaman, narasi ini akan mulai masuk akal. Untuk mencapai tata letak kolom, metode penentuan posisi absolut yang disebutkan dalam Bab 12 akan digunakan.
Struktur tag yang disederhanakan dari halaman teks terlihat seperti ini:
<Div id = header>
... info header di sini ...
</div>
<Div id = Content>
... konten di sini ...
</div>
<Div id = right>
... info kolom kanan ...
</div>
<Div id = footer>
... info footer ...
</div>
Menggunakan aturan CSS sebagai #Content dan #Footer plus tambalan kanan-kanan yang cukup untuk menggunakan metode penentuan posisi absolut untuk dimasukkan ke #Right. Dalam contoh ini, 190 piksel sudah cukup.
#content, #footer {
margin: 10px 190px 10px 10px;
}
Untuk halaman indeks, struktur markup persis sama, jadi tidak perlu menyalin aturan CSS bersama, tetapi ekstra <viv> ditambahkan ke kiri #Content sebagai kolom ketiga (#left).
<Div id = header>
... info header di sini ...
</div>
<Div id = Content>
... konten di sini ...
</div>
<Div id = left> ... info kolom kiri ... </div> <Div id = right> ... info kolom kanan ... </div><Div id = footer>
... info footer ...
</div>
Untuk struktur tiga kolom ini, kita tidak hanya harus mengatur tambalan luar kanan untuk #Content dan #Footer untuk mengakomodasi kolom kanan, tetapi kita juga harus mengatur tambalan luar kiri untuk mengakomodasi kolom kiri yang baru ditambahkan.
Namun, tambalan luar kiri telah diatur ke 10 piksel untuk mencocokkan tata letak halaman teks preset yang hanya memiliki kolom ganda.
Wow, kita terjebak, bagaimana kita harus melanjutkan? Silakan lanjutkan membaca.
Sebelumnya Halaman 1 2 3 Halaman Berikutnya Baca teks lengkapnya