Bir veb səhifənin elementlərini döndərməyin çox sadə bir yolu - yalnız bir neçə CSS stili tətbiq etmək kifayətdir. Bu dərslə tanışlıq, açılmış bir kart fanatı, dağılmış yarpaqları və ya şık fotoşəkilləri səhifədəki albomda yerləşdirməyə imkan verəcəkdir. Dərsdə bir foto albomun tətbiqinə dair bir nümunə var və bütün müasir brauzerlər üçün həll yolu nəzərə alınır.
Vacibdir
450 piksel genişliyə qədər dörd foto
Təlimat
Addım 1
Bu nümunə, döndürülmüş şəkillərlə şık bir albom səhifəsi yaratmağa yönəldiləcəkdir.
Əvvəlcədən şəkillər (eni 400px) ünvanları ilə hazırladım:
Gələcəkdə şəkillərə adlarına görə şəxsiyyət vəsiqələri təyin edəcəyik.
Addım 2
Əvvəlcə div albomundan istifadə edərək foto albomumuza bir blok hazırlayacağıq və img etiketindən istifadə edərək şəkillər əlavə edəcəyik (hər şəkil öz div etiketinə əlavə olunmalıdır), Zəhmət olmasa bloka bir identifikator təyin etdiyimizi unutmayın. Tanımlayıcıya görə, CSS istifadə edərək bloka müraciət edə bilərik.
Addım 3
Sonra, css stillərini bloka təyin etməlisiniz. Üslub siyahısı: "mövqe: nisbi;" - blokumuzun yuxarı sol küncündən mənşəyi təyin edəcək; "margin: 50px auto;" - "50px" blokumuzun girintisini səhifə məzmununun qalan hissəsinin üstündə və altına qoyacaq, həmçinin avtomatik girintini sağa və sola qoyacaq, beləliklə blokumuzu mərkəzə uyğunlaşdıracağıq; "eni: 900px; hündürlüyü: 650px;" - genişliyi müvafiq olaraq 900px, hündürlüyü 650px olaraq təyin edəcəkdir.
Göstərilən üslub siyahısı bu şəkildə yerləşdirilməlidir:
#foto_səhifə {
mövqe: nisbi;
margin: 0 avtomatik;
genişlik: 900 piksel;
hündürlük: 650 piksel;
mətn-hizalama: mərkəz;
}
"#Foto_səhifəsi" nin istifadəsinə diqqət yetirin - məhz blok kimliyinə müraciət edirik.
Addım 4
İndi foto_səhifə blokunun içindəki hər bir şəkil üçün ümumi üslublar təyin edəcəyik. Bunlar yuvarlaq künclər, boz haşiyə, ağ fon, dolgu və kölgədir.
Bu fotoqrafik effekt yaradacaq:
#foto_səhifə img {
sərhəd radiusu: 7px;
haşiyə: 1px bərk boz;
arxa plan: #ffffff;
dolgu: 10px;
qutu-kölgə: 2px 2px 10px # 697898;
}
"#Photo_page img" istifadəsinə diqqət yetirin - bu, foto_səhifə blokunun içərisindəki bütün şəkillərə istinad edəcəkdir
Addım 5
Bu kimi qısa bir stil əlavə etmək də vacibdir:
#photo_page div {
üzmək: sol;
}
Photo_page blokunun içərisindəki bütün blokları sola kiçirir.
Addım 6
Dərsin orta mərhələsi artıq başa çatıb. İşiniz ekran görüntüsündəki şəkilə bənzəyirsə, səhv etməmisiniz və növbəti mərhələyə keçə bilərsiniz.
Addım 7
İndi göndərilən fotoşəkilləri döndəririk. Bunun üçün transformasiya üslubuna ehtiyacımız var. Hal-hazırda, təmiz şəklində istifadə edilmir, yalnız əvvəlində hər brauzer üçün bir ön əlavə ilə istifadə olunur:
-webkit-çevirmə: döndür (dəyər);
-moz-çevir: döndür (dəyər);
- dəyişdirin: döndürün (dəyər);
Bu brauzerlər üçün fırlanma tərzidir: Google Chrome, Mazilla, Opera (müvafiq olaraq). "Dəyər" sözünün əvəzinə, sonunda deg ilə bir rəqəm əlavə edəcəyik:
90deg - saat yönünde 90 dərəcə döndürün.
-5deg - saat yönünün əksinə -5 dərəcə döndürün.
Və s.
Addım 8
Photo photo_1 üçün stil:
# foto_1 {
-webkit-çevirmə: döndür (5deg);
-moz-çevirmə: döndür (5deg);
- dəyişdirin: döndürün (5deg);
}
İlk şəkil 5 dərəcə döndürülür.
Addım 9
Photo photo_2 üçün stil:
# foto_2 {
-webkit-çevirmə: döndür (-3deg);
-moz-çevir: döndür (-3deg);
- dəyişdirin: döndürün (-3deg);
}
İkinci şəkil -3 dərəcə döndürülür.
Addım 10
Photo photo_3 üçün stil:
# foto_3 {
-webkit-çevirmə: döndür (-2deg);
-moz-çevir: döndür (-2deg);
-o çevirmək: döndür (-2deg);
}
Üçüncü şəkil -2 dərəcə döndürülür.
Addım 11
Photo photo4 üçün stil:
# foto_4 {
-webkit-çevirmə: döndür (8deg);
-moz-çevirmə: döndür (8deg);
- dəyişdirin: döndürün (8deg);
}
Dördüncü şəkil 8 dərəcə döndürülür.
Addım 12
Görün şəkillərin vəziyyətini necə düzəldə biləcəyinizi görək. Məsələn, ilk görüntünü yuxarıdan 20px, soldan 10px əvəzləşdirmək istəyirsiniz. Bu vəziyyətdə, marj stilindən istifadə etməlisiniz. İşimiz üçün istifadə etməyin düzgün yolu budur:
# foto_1 {
margin: 20px -10px -20px 10px;
-webkit-çevirmə: döndür (5deg);
-moz-çevirmə: döndür (5deg);
- dəyişdirin: döndürün (5deg);
}
Xahiş edirik unutmayın ki, üslubun ilk dəyəri üst marjdır; ikincisi sağa girinti; üçüncüsü altdan girinti; dördüncü - sol girinti.
Vacibdir: bizim vəziyyətimizdə alt margin üst marjanın mənfi dəyərinə bərabərdir. Səhifənizdəki görüntünün altında boşluq görürsənsə, görüntünün alt hissəsini daha da mənfi bir şəkildə girməyə çalışın.
Addım 13
İş tamamlandı, bir ekran görüntüsü təqdim edirəm (Adım 12-də təsvir olunan ilk görüntünün girinti dəyişikliyini nəzərə alaraq).
Sizə uyğun vəziyyətdə olmayan şəkillərə girinti üslubu əlavə edin.
