Вэбсайтын хуудасны элементүүдийг эргүүлэх маш энгийн арга бол хэдхэн CSS загварыг ашиглахад хангалттай. Энэ хичээлтэй танилцсанаар та хуудсан дээрх цомог дотор задраагүй картын сэнс, сарнисан унасан навч эсвэл загварлаг зургийг байрлуулах боломжтой болно. Хичээл нь гэрэл зургийн цомгийг хэрэгжүүлэх жишээг агуулсан бөгөөд орчин үеийн бүх хөтөчүүдэд зориулсан шийдлийг харгалзан үздэг.
Энэ нь зайлшгүй шаардлагатай
450px хүртэлх өргөнтэй дөрвөн зураг
Зааварчилгаа
1-р алхам
Энэ жишээ нь эргэлдсэн зурагтай загварлаг цомгийн хуудас үүсгэхэд анхаарлаа төвлөрүүлэх болно.
Би урьдчилж зураг (өргөн 400px) хаягаар бэлтгэсэн:
Цаашид бид зургуудад нэрнийх нь дагуу үнэмлэх олгоно.
Алхам 2
Нэгдүгээрт, бид div tag ашиглан зургийн цомгийнхоо блокыг бэлтгэж, img тагийг ашиглан зураг нэмж оруулна (зураг бүр өөрийн гэсэн div тэмдэгт хавсаргасан байх ёстой).
Бид блокод танигч оноож өгсөн болохыг анхаарна уу. Тодорхойлогчоор бид css ашиглан блок руу хандаж болно.
Алхам 3
Дараа нь та css стилийг блок дээр тохируулах хэрэгтэй. Загварын жагсаалт: "байрлал: харьцангуй;" - гарал үүслийг манай блокийн зүүн дээд булангаас тохируулах болно; "margin: 50px auto;" - хуудасны бусад агуулгын дээр ба түүнээс доош хэсэгт "50px" блокийн хазайлтыг тохируулах, мөн баруун, зүүн тийш автоматаар догол мөрийг тохируулах, ингэснээр манай блокыг төвд байрлуулах; "өргөн: 900px; өндөр: 650px;" - өргөнийг 900px, өндрийг 650px болгож тус тус тохируулна.
Тодорхой загварын жагсаалтыг дараах байдлаар байрлуулах ёстой.
# зураг_хуудас {
албан тушаал: харьцангуй;
маржин: 0 автомат;
өргөн: 900px;
өндөр: 650px;
текстийг зэрэгцүүлэх: төв;
}
"# Фото_хуудас" -ын хэрэглээг анхаарна уу - бид блок ID-г ингэж л хэлнэ.
Алхам 4
Одоо бид photo_page блок доторх зураг тус бүрт ерөнхий хэв маягийг хуваарилах болно. Эдгээр нь бөөрөнхий булан, саарал хүрээ, цагаан дэвсгэр, дэвсгэр, сүүдэрлэх сүүдэр юм.
Энэ нь гэрэл зургийн үр нөлөөг бий болгоно.
# зураг_хуудас img {
хилийн радиус: 7хх;
хил: 1px хатуу саарал;
суурь: #ffffff;
дүүргэлт: 10px;
хайрцагны сүүдэр: 2х 2х 10х # 697898;
}
"#Photo_page img" -ийг ашигласныг анхаарна уу - энэ нь photo_page блок доторх бүх зургийг харуулах болно.
Алхам 5
Үүнтэй адил богино хэв маягийг нэмэх нь бас чухал юм.
#photo_page div {
хөвөх: зүүн;
}
Энэ нь зүүн талд байрлах photo_page блок доторх бүх блокуудыг багасгадаг.
Алхам 6
Хичээлийн завсрын үе шат дууслаа. Хэрэв таны ажил дэлгэцийн агшин дээрх зурагтай төстэй байвал та алдаа хийгээгүй тул дараагийн алхам руу шилжиж болно.
Алхам 7
Одоо бид байрлуулсан зургуудыг эргүүлэхээр эргэв. Үүний тулд бидэнд хувиргах хэв маяг хэрэгтэй. Одоогийн байдлаар, энэ нь цэвэр хэлбэрээр ашиглагдаагүй, гэхдээ зөвхөн эхэнд нь хөтөч бүрийн угтвартай иймэрхүү байна:
-webkit-хувиргах: эргүүлэх (утга);
-moz-хувиргах: эргүүлэх (утга);
-o-хувиргах: эргүүлэх (утга);
Энэ бол хөтөчийг эргүүлэх хэв маяг юм: Google Chrome, Mazilla, Opera (тус тус). "Утга" гэдэг үгийн оронд төгсгөлд нь deg гэсэн тоог оруулах болно.
90deg - цагийн зүүний дагуу 90 градус эргүүлнэ.
-5 градус - цагийн зүүний эсрэг -5 градус эргүүлнэ.
Гэх мэт
Алхам 8
Photo_1-ийн хэв маяг:
# зураг_1 {
-webkit-хувиргах: эргүүлэх (5deg);
-moz-хувиргах: эргүүлэх (5deg);
-o-хувиргах: эргүүлэх (5deg);
}
Эхний зургийг 5 градус эргүүлнэ.
Алхам 9
Photo_2-ийн хэв маяг:
# зураг_2 {
-webkit-хувиргах: эргүүлэх (-3deg);
-moz-хувиргах: эргүүлэх (-3deg);
-o-хувиргах: эргүүлэх (-3deg);
}
Хоёрдахь зургийг -3 градус эргүүлнэ.
Алхам 10
Зургийн 3-р хэв маяг:
# фото_3 {
-webkit-хувиргах: эргүүлэх (-2deg);
-moz-хувиргах: эргүүлэх (-2deg);
-o-хувиргах: эргүүлэх (-2deg);
}
Гуравдахь зургийг -2 градус эргүүлэв.
Алхам 11
Photo_4-ийн хэв маяг:
# фото_4 {
-webkit-хувиргах: эргүүлэх (8deg);
-moz-хувиргах: эргүүлэх (8deg);
-o-хувиргах: эргүүлэх (8deg);
}
Дөрөв дэх зургийг 8 градус эргүүлсэн байна.
Алхам 12
Зургийн байрлалыг хэрхэн яаж засахаа үзье. Жишээлбэл, та эхний дүрсийг дээрээс нь 20px, зүүн талаас нь 10px-ээр нөхөхийг хүсч байна. Энэ тохиолдолд та захын хэв маягийг ашиглах хэрэгтэй. Үүнийг манай тохиолдолд ашиглах зөв арга зам энд байна.
# зураг_1 {
маржин: 20px -10px -20px 10px;
-webkit-хувиргах: эргүүлэх (5deg);
-moz-хувиргах: эргүүлэх (5deg);
-o-хувиргах: эргүүлэх (5deg);
}
Загварын эхний утга нь дээд ирмэг гэдгийг анхаарна уу. хоёр дахь нь баруун тийш догол мөр; гурав дахь нь доороос доош догол мөр; дөрөвдэх - зүүн догол.
Чухал: манай тохиолдолд доод ирмэг нь дээд талын сөрөг утгатай тэнцүү байна. Хэрэв та хуудсан дээрх зургийн доор цагаан зайг олж харвал зургийн доод талыг илүү сөргөөр эргүүлж үзээрэй.
Алхам 13
Ажил дууссан, би дэлгэцийн агшинг үзүүлэв (12-р алхам дээр тайлбарласан эхний зургийн хөндийн өөрчлөлтийг харгалзан).
Өөрт тохирохгүй байрлал бүхий зурган дээр хэвний хэв маягийг нэмж оруулаарай.
