Üzənlərdən Istifadə Edərək Bir Sayt ızgarası Necə Qurulur

Üzənlərdən Istifadə Edərək Bir Sayt ızgarası Necə Qurulur
Üzənlərdən Istifadə Edərək Bir Sayt ızgarası Necə Qurulur

Video: Üzənlərdən Istifadə Edərək Bir Sayt ızgarası Necə Qurulur

Video: Üzənlərdən Istifadə Edərək Bir Sayt ızgarası Necə Qurulur
Video: Hər hansı avtomobil sahibinin həyatını sadələşdirən Aliexpress-dən 30 faydalı avtomobil məhsulları 2024, Noyabr
Anonim

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.

Üzənlərdən istifadə edərək bir sayt ızgarası necə qurulur
Üzənlərdən istifadə edərək bir sayt ızgarası necə qurulur

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.

Sayt axını
Sayt axını

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.

Şəkil
Şəkil

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}

1 axın
1 axın

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; }

2 axın
2 axın

3 axın:

.column3 {float: right; eni: 65px; minimum hündürlük: 50px; }

3 axın
3 axın

Altbilgi (.footer) ilə məşğul olmaq:

.footer {aydın: hər ikisi; // hər iki tərəfə də sarın}

zirzəmi
zirzəmi

Üç axından ibarət olan float istifadə edərək sayt üçün bir şəbəkə hazırladıq.

Tövsiyə: