Keling, saytning grid dizaynini ko'rib chiqamiz va alohida komponentlarni ajratamiz. Keling, nima uchun float juda foydali ekanligini, shuningdek uchta oqim va saytning altbilgisidan birinchi veb-tarmoqni yaratish uchun ommabop texnikani o'rganib chiqamiz.
Saytning panjara qurilishini o'rganish uchun siz "oqim" nima ekanligini tushunishingiz kerak. Oqim - bu saytning elementlari, birin-ketin joylashgan. Masalan, bu sukut bo'yicha birin ketin ketadigan div elementlari bo'lishi mumkin. Ammo oqim qayta tartibga solinishi mumkin va blok elementlarining holati o'zgarishi mumkin.
Oqimni boshqarish uchun biz float xususiyatidan foydalanamiz, bu blokni chap yoki o'ng tomonga joylashtirishi mumkin. CSS faylida yozish kifoya:
"class yoki block name" {float: right / left; }
Float-ning birdan-bir kamchiligi bu bitta blokni boshqasiga "qoplash" qobiliyatidir.
Ishdan qochish uchun biz aniq foydalanamiz: ikkalasi ham - bu xususiyat blok atrofidagi oqimni o'rnatadi. Biz kenglik va balandlikni maksimal va minimal qilib belgilaymiz, shunda qiymat tarkib (matn, rasm) hajmiga qarab hosil bo'ladi. Margin - blok qiymatiga qarab tashqi chegaralar avtomatik ravishda hosil bo'lishi uchun qiymatni avtomatik qilib o'rnating.
Float bloklarni ikki yo'nalishda joylashtirishi mumkinligi sababli, saytni oqimlarga - chapga va o'ngga bo'lish odatiy holdir. Agar dasturchiga faqat ikkita oqim kerak bo'lsa, u holda chap va o'ng suzib yuradi, lekin agar ikkitadan ko'p bo'lsa, u margin yordamida chekkalarni sozlaydi. Bu qanday sodir bo'ladi:
.column1 {suzuvchi: chap; kengligi: 65px; minimal balandlik: 50px; margin-right: 9px; // markaz qutisidan 9px}
2 oqim:
.column2 {suzuvchi: chap; // chap blokga, lekin "bir-birining ustiga chiqmasdan", chunki biz chekka kenglikni qo'lladik: 80px; minimal balandlik: 50px; }
3 oqim:
.column3 {suzuvchi: o'ng; kengligi: 65px; minimal balandlik: 50px; }
Altbilgi (.footer) bilan ishlash:
.footer {aniq: ikkalasi ham; // ikkala tomonni o'rash}
Biz uchta oqimdan iborat bo'lgan float yordamida saytni shunday qilib tuzdik.
