Saytın şəbəkə dizaynına nəzər salaq və ayrı-ayrı komponentləri parçalayaq. Niyə float-ın bu qədər faydalı olduğunu, həmçinin üç axından və sayt altbilgisindən ilk veb şəbəkəni qurmaq üçün məşhur texnikanı araşdıraq.
Bir saytın şəbəkə quruluşunu öyrənmək üçün "axın" ın nə olduğunu başa düşməlisiniz. Axın bir-birinin ardınca yerləşən saytın elementləridir. Məsələn, bunlar varsayılan olaraq bir-birinin ardınca gedən div elementləri ola bilər. Ancaq axın yenidən təşkil edilə bilər və blok elementlərinin yeri dəyişdirilə bilər.
Axını idarə etmək üçün bloku sola və ya sağa yerləşdirə bilən float xassəsini istifadə edirik. CSS sənədində yazmaq kifayətdir:
"sinif və ya blok adı" {float: sağ / sol; }
Şamandıranın yeganə çatışmazlığı, bir blokun digərinin üstünə "üst-üstə düşmə" qabiliyyətidir.
Bitməmək üçün aydın istifadə edirik: hər ikisi - bu xüsusiyyət blok ətrafında axını təyin edəcəkdir. Eni və hündürlüyü maksimum və minimum olaraq təyin etdik ki, məzmunun (mətn, şəkillər) ölçüsünə görə dəyər əmələ gəlsin. Margin - dəyəri avtomatik olaraq təyin edin ki, xarici kənar boşluqlar blokun yerləşməsindən asılı olaraq avtomatik olaraq formalaşsın.
Şamandıra blokları iki istiqamətə yerləşdirə bildiyindən, saytı sola və sağa axınlara bölmək adətlidir. Proqramçıya yalnız iki axın lazımdırsa, sola və sağa üzüb çıxır, ancaq ikidən çox olarsa, margin istifadə edərək kənarları tənzimləyir. Bu necə olur:
.column1 {üzmək: sol; eni: 65px; minimum hündürlük: 50px; margin-right: 9px; // orta qutudan 9piksel}
2 axın:
.column2 {float: left; // sol bloka, lakin "üst-üstə düşmədən", çünki margin genişliyini tətbiq etdik: 80px; minimum hündürlük: 50px; }
3 axın:
.column3 {float: right; eni: 65px; minimum hündürlük: 50px; }
Altbilgi (.footer) ilə məşğul olmaq:
.footer {aydın: hər ikisi; // hər iki tərəfə də sarın}
Üç axından ibarət olan float istifadə edərək sayt üçün bir şəbəkə hazırladıq.