Veb-sayt sahifasining elementlarini aylantirishning juda oddiy usuli - faqat bir nechta CSS uslublarini qo'llang. Ushbu dars bilan tanishish sizga ochilmagan kartochkalarni, sochilgan barglarni yoki zamonaviy fotosuratlarni sahifadagi albomga joylashtirishga imkon beradi. Darsda fotoalbomni amalga oshirish misoli keltirilgan va barcha zamonaviy brauzerlar uchun echim hisobga olingan.
Bu zarur
Kengligi 450 pikselgacha bo'lgan to'rtta fotosurat
Ko'rsatmalar
1-qadam
Ushbu misol aylantirilgan fotosuratlar bilan zamonaviy albom sahifasini yaratishga qaratilgan.
Men oldindan rasmlarni (kengligi 400px) manzillar bilan tayyorladim:
Kelajakda biz rasmlarga ularning nomlari bo'yicha identifikatorlarni tayinlaymiz.
2-qadam
Birinchidan, biz div albomidan foydalanib fotoalbomimiz uchun blok tayyorlaymiz va img yorlig'i yordamida unga fotosuratlar qo'shamiz (har bir rasm o'z div yorlig'ida bo'lishi kerak), masalan:
Iltimos, biz blokga identifikatorni tayinlaganimizni unutmang. Identifikator bo'yicha biz CSS yordamida blokga murojaat qilishimiz mumkin.
3-qadam
Keyinchalik, siz CSS uslublarini blokga o'rnatishingiz kerak. Uslublar ro'yxati: "pozitsiya: nisbiy;" - kelib chiqishini blokimizning yuqori chap burchagidan o'rnatadi; "margin: 50px auto;" - bizning "50px" blokirovkamizni sahifaning qolgan qismining yuqorisida va pastida o'rnatadi, shuningdek, avtomatik ravishda chuqurni o'ngga va chapga o'rnatadi va shu bilan blokimizni markazga moslashtiradi; "kengligi: 900 piksel; balandligi: 650 piksel;" - kengligi mos ravishda 900 pikselga va balandligi 650 pikselga o'rnatiladi.
Belgilangan uslublar ro'yxati shu tarzda joylashtirilishi kerak:
#foto_page {
pozitsiya: nisbiy;
margin: 0 avtomatik;
kengligi: 900 piksel;
balandligi: 650 piksel;
matn bilan tekislash: markaz;
}
"#Photo_page" dan foydalanishga e'tibor bering - biz blokirovka identifikatoriga shunday murojaat qilamiz.
4-qadam
Endi biz photo_page blokidagi har bir rasm uchun umumiy uslublarni tayinlaymiz. Bular yumaloq burchaklar, kulrang hoshiya, oq fon, plomba va soya.
Bu fotografik effekt yaratadi:
#photo_page img {
chegara radiusi: 7px;
chegara: 1px qattiq kulrang;
fon: #ffffff;
to'ldirish: 10 piksel;
soya-quti: 2px 2px 10px # 697898;
}
"#Photo_page img" dan foydalanishga e'tibor bering - bu photo_page blokidagi barcha rasmlarga tegishli bo'ladi
5-qadam
Qisqa uslubni qo'shish ham muhimdir:
#photo_page div {
suzuvchi: chap;
}
Photo_page blokidagi barcha bloklarni chapga qisqartiradi.
6-qadam
Hozir darsning oraliq bosqichi yakunlandi. Agar sizning ishingiz skrinshotdagi rasmga o'xshash bo'lsa, unda siz xato qilmagansiz va keyingi bosqichga o'tishingiz mumkin.
7-qadam
Endi joylashtirilgan fotosuratlarni aylantirishga o'tamiz. Buning uchun biz o'zgartirish uslubiga muhtojmiz. Ayni paytda, u sof shaklida ishlatilmaydi, lekin boshida har bir brauzer uchun prefiks bilan quyidagi kabi:
-webkit-transform: aylantirish (qiymat);
-moz-transform: aylantirish (qiymat);
-o-transformatsiya: aylantirish (qiymat);
Bu brauzerlar uchun aylanish uslubi: Google Chrome, Mazilla, Opera (mos ravishda). "Qiymat" so'zining o'rniga, oxirida deg bilan raqam qo'yamiz, quyidagicha:
90deg - soat yo'nalishi bo'yicha 90 daraja aylantiring.
-5deg - soat sohasi farqli ravishda -5 daraja aylantiring.
Va boshqalar.
8-qadam
Photo_1 uchun uslub:
# photo_1 {
-webkit-transform: aylantirish (5deg);
-moz-transform: aylantirish (5deg);
- o'zgartirmoq: aylantirish (5deg);
}
Birinchi rasm 5 gradusga burilgan.
9-qadam
Photo_2 uchun uslub:
# photo_2 {
-webkit-transform: aylantirish (-3deg);
-moz-transform: aylantirish (-3deg);
-o-transformatsiya: aylantirish (-3deg);
}
Ikkinchi rasm -3 daraja burilgan.
10-qadam
Photo_3 uchun uslub:
# photo_3 {
-webkit-transform: aylantirish (-2deg);
-moz-transform: aylantirish (-2deg);
-o-konvertatsiya qilish: aylantirish (-2deg);
}
Uchinchi rasm -2 darajaga burilgan.
11-qadam
Photo_4 uchun uslub:
# photo_4 {
-webkit-transform: aylantirish (8deg);
-moz-transform: aylantirish (8deg);
- o'zgartirmoq: aylantirish (8deg);
}
To'rtinchi rasm 8 gradusga burilgan.
12-qadam
Keling, rasmlarning holatini qanday tuzatishingiz mumkinligini ko'rib chiqamiz. Masalan, siz birinchi rasmni tepadan 20px, chapdan 10px bilan almashtirishni xohlaysiz. Bunday holda, margin uslubidan foydalanishingiz kerak. Buni bizning ishimiz uchun ishlatishning to'g'ri usuli:
# photo_1 {
hoshiya: 20px -10px -20px 10px;
-webkit-transform: aylantirish (5deg);
-moz-transform: aylantirish (5deg);
- o'zgartirmoq: aylantirish (5deg);
}
Iltimos, uslubning birinchi qiymati yuqori margin ekanligini unutmang; ikkinchisi - o‘ng tomonga burilish; uchinchisi - pastdan indent; to'rtinchi - chap chiziq.
Muhim: bizning holimizda pastki marja yuqori marjning salbiy qiymatiga teng. Agar siz sahifangizdagi rasm ostidagi bo'sh joyni ko'rsangiz, rasmning pastki qismini yanada salbiy tomonga tushirishga harakat qiling.
13-qadam
Ish tugallandi, men skrinshotni taqdim etaman (12-qadamda tasvirlangan birinchi rasmning chizig'idagi o'zgarishni hisobga olgan holda).
Sizga mos bo'lmagan har qanday rasmga chizish uslubini qo'shing.
