CSS istifadə edərək Web səhifə Layouts dizayn xüsusiyyət
CSS mülkiyyəti layout üçün çox əhəmiyyətli bir xüsusiyyətdir. Bu, veb-səhifə dizaynlarınızı göstərmək istədikləri kimi yerləşdirməyə imkan verir - ancaq onu necə istifadə etmək üçün onu necə işlədiyini başa düşmək lazımdır.
Bir stildə, CSS float əmlakı bu kimi görünür:
.right {float: sağ; }
Bu brauzerdə "sağ" sinfi ilə olan hər şeyi sağa salmaq lazımdır.
Siz bunu belə təyin edərdiniz:
class = "sağ" />
CSS ilə float Əmlak Nə Float edə bilərəm?
Hər bir elementi bir web səhifəsində yerləşdirə bilməzsiniz. Yalnız blok səviyyəli elementləri üzə bilərsiz. Bunlar, şəkillər (), paraqraflar (), bölmələr () və siyahılar () kimi səhifədə bir məkan bloku tutan elementlərdir.
Mətni təsir edən, lakin səhifədə bir qutu yaratmayan digər elementlərə inline elementlər deyilir və buraxıla bilməz. Bunlar span (), line fasilələri (), güclü vurğu () və ya italik () kimi elementlərdir.
Harada Onlar Yüzer?
Elementləri sağa və ya sola səpələyə bilərsiniz. Süzülmüş elementi izləyən hər hansı bir element digər tərəfdən süzülmüş element ətrafında axır.
Məsələn, bir görüntüyü sola salıramsa, onu izləyən hər hansı bir mətn və ya digər elementlər sağa doğru axır. Bir görüntüyü sağa düzəltməsəm, hər hansı bir mətn və ya onun arxasındakı digər elementlər onun ətrafında sola axır. Brauzer şəkilləri göstərmək üçün ayarlandığı halda, hər hansı bir float tərzinə tətbiq edilən mətn bloğuna yerləşdirilən bir şəkil göstərilir.
Bu, adətən, görüntünün aşağı hissəsində göstərilən aşağıdakı mətnin birinci xəttidir.
Onlar nə qədər uçacaqlar?
Yayılmış bir element, konteyner elementinin mümkün olduğu qədər sola və ya sağa hərəkət edəcəkdir. Bu, kodunuzun necə yazıldığına bağlı olaraq bir neçə müxtəlif vəziyyətdə nəticələnir.
Bu nümunələr üçün solda kiçik bir DIV elementi üzə çıxacaq:
- Yayılmış elementin öncədən müəyyən edilmiş eni olmadığı təqdirdə, float-dən asılı olmayaraq tələb olunan və mövcud olduqca çox üfüqi yer tutur. Qeyd: genişlik müəyyən edilmədiyi zaman bəzi brauzerlər süzülmüş elementlərin yanında elementləri yerləşdirməyə çalışır - adətən qeyri-float elementi yalnız kiçik bir məbləğ verir. Belə ki, siz həmişə süzülmüş elementlərdə genişliyi müəyyənləşdirməlisiniz .
- Konteyner elementi HTML elementi olsaydı, floated DIV səhifənin sol marginində oturacaq.
- Konteyner elementi başqa bir şeylə dolu olsaydı, floated DIV konteynerin sol marjasına oturacaq.
- Yığılan elementləri yuva edə bilərsiniz və şaşırtıcı bir yerə çatan şamandıra ilə nəticələnə bilər. Məsələn, bu float hüququ üzən DIV içərisində bir sol daldırma DIV edir.
- Konteynerdə bir otaq varsa, kölgəli elementlər bir-birinin yanında oturacaq. Məsələn, bu konteyner 400px geniş konteynerdə süzülmüş üç 100px geniş DIV elementə malikdir.
Foto galerisi yerləşdirməsini yaratmaq üçün hətta floats istifadə edə bilərsiniz. Mövzu ilə bir DIV-də hər bir kiçik ucunu (eyni ölçüdə olduqda yaxşı işləyir) yerləşdirin və konteynerdə DIV elementlərini float edin.
Brauzer pəncərəsinin nə qədər geniş olmasına baxmayaraq, kiçik şəkillər birbaşa düzəldiləcəkdir.
Float'ı bağlamaq
Bir elementin necə üzmək istədiyini bildikdən sonra, şamandıracağın söndürülməsini bilmək vacibdir. CSS açıq xüsusiyyət ilə float söndürün. Sol səthlər, sağ hərəkətlər və ya hər ikisini təmizləyə bilərsiniz:
təmiz: sol;
aydın: sağ;
aydındır: hər ikisi;
Aydınlıq malını təyin etdiyiniz hər hansı element, bu istiqamətdə yayılmış bir elementin altındadır. Məsələn, bu nümunədə mətnin ilk iki bəndi silinməz, amma üçüncüsü.
Fərqli layout effektləri əldə etmək üçün sənədlərinizdə müxtəlif elementlərin açıq dəyəri ilə oynayır.
Ən maraqlı süzülmüş düzəlişlərdən biri mətnin paraqrafları ilə yanaşı sağ və ya sol sütun şəkillərindən ibarətdir. Mətn, görünüşündən keçmək üçün kifayət qədər uzun olmasa belə, əvvəlki görüntünün əvəzinə sütunda görünməyinə əmin olmaq üçün bütün şəkilləri təmizləyin.
HTML (bu paraqrafı təkrarlayın):
Boşanma ilə əlaqədar olaraq, müalicə olunmaqda çətinlik çəkir. Qeyri-qanuni olmayan, işləmək və işləmək.
CSS (şəkilləri sola çəkmək üçün):
img.float {float: sol;
təmiz: sol;
margin: 5px;
}
Və sağa:
img.float {float: sağ;
aydın: sağ;
margin: 5px;
}
Layout üçün Floats istifadə
Float xüsusiyyətinin necə işlədiyini anladıqdan sonra, veb səhifələrinizi yerləşdirmək üçün istifadə etməyə başlaya bilərsiniz. Bunlar floated web page yaratmaq üçün atdığım addımlardır:
- Layihəni tərtib edin (kağız üzərində və ya qrafik alətində və ya başımda).
- Səhifə bölmələrinin harada olacağını müəyyənləşdirin.
- Müxtəlif qabların və onların içindəki elementlərin genişliklərini müəyyənləşdirin.
- Hər şeyi yaltaq. Hətta ən xarici konteyner elementi sola süzülür, buna görə brauzerin görünüş portu ilə bağlı olduğu yeri bilirəm.
Layout bölmələrinizin genişliklərini (faizləri yaxşı) bildiyiniz müddətdə, float xüsusiyyətini səhifədə yerləşdirmək üçün istifadə edə bilərsiniz. Və gözəl bir şeydir ki, Internet Explorer və ya Firefox üçün fərqli olan qutu modelindən çox narahat olmayın.