Apa tata letak blok? Bagaimana untuk memaksakan satu halaman dari situs Anda sendiri?

Ada keinginan untuk belajar membuat situs halaman Anda sendiri? Kemudian mari kita telah menguasai apa tata letak blok. pemula tata letak memenuhi sejumlah kesulitan, mereka memiliki banyak pertanyaan. Pertimbangkan apa yang blok coding.

Sebuah tip penting

Gunakan editor WYSIWYG, jadi semuanya lebih jelas. Mereka yang tahu HTML dengan baik, bekerja di notebook, karena mereka memahami segala sesuatu. Dan pemula dapat mengambil keuntungan dari program-program seperti FrontPage atau, misalnya, Dreamweaver.

Jenis situs tata letak

Ada beberapa jenis tata letak:

1. Tabel.
2. Blok.
3. Dicampur.

Kami tertarik dalam tata letak blok. Apa yang membedakannya dari meja? Pada tata letak blok menggunakan tag DIV memiliki kelebihan tertentu:

1. Memuat dengan desain blok lebih cepat.
2. Konten yang ditampilkan blok (seperti tabel) sebagai download terjadi. Seperti diketahui, tabel ini akan menampilkan hanya setelah seluruh tabel.
3. Kode dengan div-s lebih mudah dibaca.

Hal ini tidak semua keuntungan, yang terkenal dengan tata letak blok.

Bagaimana mengubah lokasi div-blok?

Hal ini akan membantu kita untuk mengapung - properti ini, yang mampu berikut:

1. Align kiri - kiri.
2. Untuk menyelaraskan benar - benar.
3. Elemen tetap di mana ia berada, ia tidak akan bergerak jika tidak diberikan. Nilai ini akan menjadi default.

Fitur lain yang penting yang kita butuhkan - yang jelas. Dia mungkin memiliki 4 nilai-nilai:

1. Untuk instalasi di bawah item sebelumnya, bergerak ke kanan, blok - tepat.
2. set sebelah kiri bawah elemen sebelumnya, yang pindah ke kiri.
3. Kedua - Pemasangan blok pengungsi sebelumnya.
4. Tidak ada menunjukkan tidak adanya pembatasan pada posisi blok relatif terhadap elemen-elemen yang dipindahkan.

contoh

Mempertimbangkan bagaimana hal itu akan terlihat seperti blok div tata letak. Kita menulis kode kita:

Di bawah kode yang Anda lihat hasilnya. Dengan demikian, atas dasar beberapa properti dapat dikendalikan pengaturan blok seperti yang diinginkan. Pergi ke saat berikutnya. Kami telah menggunakan text-align: center, untuk menyelaraskan setiap blok untuk browser apapun.

Seperti yang Anda lihat, itu adalah tata letak blok cukup sederhana situs. Hal ini penting untuk mempelajari dan mempraktekkan lebih banyak properti yang akan membuat struktur yang lebih fleksibel dari halaman.

Sesuatu yang lebih penting

Ada satu fitur populer yang digunakan dalam tata letak - posisi, itu digunakan untuk penentuan posisi.

Nilai untuk sifat posisi:

1. Relatif - set posisi elemen relatif terhadap lokasi asli mereka. Aplikasi kiri, atas, baik-baik saja, bawah elemen bergerak dalam arah tertentu.
2. Statis - display barang normal. Tidak masuk akal untuk menggunakan kanan / kiri, atas / bawah - itu dapat menyebabkan apa-apa.
3. Absolute - elemen posisi absolut.
4. Tetap - mirip mutlak. Hal ini terikat ke suatu titik tertentu pada layar, tetapi tidak mengubah posisinya, bahkan jika halaman flipping.

Banyak tata letak memperhatikan bahwa ketika menggunakan posisi tetap, absolut dan relatif dari blok yang ditumpangkan. Dan kemudian menarik untuk mengetahui yang mana dari blok bawah, yang di atas. Untuk menjawab pertanyaan ini, Anda perlu properti z-index. Ini membawa blok tata letak ke tingkat yang baru. Hal ini memungkinkan tidak hanya untuk membuat posisi pesawat, tetapi juga dengan cara Z. sumbu ketiga nilai properti tersebut bisa positif atau negatif.

Buat 3 blok. Berikutnya, eksperimen dengan posisi mutlak.

Seperti yang Anda lihat, mudah untuk mengubah posisi blok. Atas dasar kenyataan bahwa Anda sekarang dapat, untuk membuat tata letak halaman blok dasar. Menerapkan banyak properti yang Anda akan meningkatkan keterampilan Anda.