Njia rahisi sana ya kuzungusha vitu vya ukurasa wa wavuti - tumia tu mitindo michache ya css. Kuzoea somo hili itakuruhusu kuweka shabiki wa kadi iliyofunuliwa, majani yaliyoanguka yaliyotawanyika au picha maridadi kwenye albamu kwenye ukurasa. Somo hilo lina mfano wa utekelezaji wa albamu ya picha na inazingatia suluhisho kwa vivinjari vyote vya kisasa.
Ni muhimu
Picha nne hadi upana wa 450px
Maagizo
Hatua ya 1
Mfano huu utazingatia kuunda ukurasa maridadi wa albamu na picha zilizozungushwa.
Niliandaa mapema picha (upana 400px) na anwani:
Katika siku zijazo, tutatoa vitambulisho kwa picha kulingana na majina yao.
Hatua ya 2
Kwanza, tutaandaa kizuizi cha albamu yetu ya picha kwa kutumia lebo ya div, na pia tiongeze picha kwa kutumia tag ya img (kila picha lazima ifungwe kwenye lebo yake ya div), kama hii:
Tafadhali kumbuka kuwa tumepewa kitambulisho kwa kizuizi -. Kwa kitambulisho, tunaweza kutaja kizuizi kwa kutumia css.
Hatua ya 3
Ifuatayo, unahitaji kuweka mitindo ya css kwenye block. Orodha ya mitindo: "msimamo: jamaa;" - itaweka asili kutoka kona ya juu kushoto ya kizuizi chetu; "margin: 50px auto;" - itaweka ujazo wa kizuizi chetu cha "50px" hapo juu na chini ya yaliyomo kwenye ukurasa, na vile vile kuweka mpangilio wa moja kwa moja kulia na kushoto, na hivyo kuweka kizuizi chetu katikati; "upana: 900px; urefu: 650px;" - itaweka upana kuwa 900px na urefu kuwa 650px, mtawaliwa.
Orodha maalum ya mitindo lazima iwekwe kwa njia hii:
#picha_picha {
msimamo: jamaa;
margin: 0 auto;
upana: 900px;
urefu: 650px;
andika-maandishi: katikati;
}
Kumbuka matumizi ya "#picha_picha" - hivi ndivyo tunavyotaja kitambulisho cha kuzuia.
Hatua ya 4
Sasa tutatoa mitindo ya jumla kwa kila picha ndani ya picha ya ukurasa. Hizi ni pembe zenye mviringo, mpaka wa kijivu, asili nyeupe, padding, na kivuli kivuli.
Hii itaunda athari ya picha:
Img
eneo la mpaka: 7px;
mpaka: 1px kijivu imara;
historia: #ffffff;
padding: 10px;
sanduku-kivuli: 2px 2px 10px # 697898;
}
Kumbuka matumizi ya "# picha_page img" - hii itarejelea picha zote zilizo ndani ya block_page
Hatua ya 5
Ni muhimu pia kuongeza mtindo mfupi kama huu:
#picha_ya picha div {
kuelea: kushoto;
}
Inapunguza vizuizi vyote ndani ya kizuizi cha ukurasa wa picha kushoto.
Hatua ya 6
Hatua ya kati ya somo sasa imekamilika. Ikiwa kazi yako ni sawa na picha kwenye skrini, basi hujafanya kosa na unaweza kuendelea na hatua inayofuata.
Hatua ya 7
Sasa tunageuka kuzungusha picha zilizochapishwa. Kwa hili tunahitaji mtindo wa kubadilisha. Kwa sasa, katika hali yake safi, haitumiki, lakini tu na kiambishi awali kwa kila kivinjari mwanzoni, kama hii:
-webkit-kubadilisha: mzunguko (thamani);
-moz-transform: mzunguko (thamani);
-o-kubadilisha: mzunguko (thamani);
Huu ndio mtindo wa kuzungusha kwa vivinjari: Google Chrome, Mazilla, Opera (mtawaliwa). Badala ya neno "thamani", tutaingiza nambari na dig mwishoni, kama hii:
90deg - zungusha digrii 90 kwa saa.
-5g - zungusha -5 digrii kinyume cha saa.
Na kadhalika.
Hatua ya 8
Mtindo wa picha photo_1:
# picha_1 {
-webkit-kubadilisha: mzunguko (5deg);
-moz-transform: zunguka (5deg);
-o-kubadilisha: mzunguko (5deg);
}
Picha ya kwanza imezungushwa nyuzi 5.
Hatua ya 9
Mtindo wa picha photo_2:
# picha_2 {
-webkit-kubadilisha: zunguka (-3deg);
-moz-transform: zunguka (-3deg);
-o-badilisha: zunguka (-3deg);
}
Picha ya pili imezungushwa -3 digrii.
Hatua ya 10
Mtindo wa picha photo_3:
# picha_3 {
-webkit-kubadilisha: mzunguko (-2deg);
-moz-transform: mzunguko (-2deg);
-o-kubadilisha: mzunguko (-2deg);
}
Picha ya tatu imezungushwa digrii -2.
Hatua ya 11
Mtindo wa picha photo_4:
# picha_4 {
-webkit-kubadilisha: mzunguko (8deg);
-moz-transform: mzunguko (8deg);
-o-kubadilisha: mzunguko (8deg);
}
Picha ya nne imezungushwa nyuzi 8.
Hatua ya 12
Wacha tuone jinsi unaweza kusahihisha msimamo wa picha. Kwa mfano, unataka kumaliza picha ya kwanza 20px kutoka juu na 10px kutoka kushoto. Katika kesi hii, unahitaji kutumia mtindo wa margin. Hapa kuna njia sahihi ya kuitumia kwa kesi yetu:
# picha_1 {
margin: 20px -10px -20px 10px;
-webkit-kubadilisha: zunguka (5deg);
-moz-transform: zunguka (5deg);
-o-kubadilisha: mzunguko (5deg);
}
Tafadhali kumbuka kuwa thamani ya kwanza ya mtindo ni kando ya juu; pili ni indent kwa kulia; ya tatu ni indent kutoka chini; ujazo wa nne - kushoto.
Muhimu: kwa upande wetu, margin ya chini ni sawa na thamani hasi ya margin ya juu. Ukiona nafasi nyeupe chini ya picha kwenye ukurasa wako, jaribu kutia ndani chini ya picha hata vibaya zaidi.
Hatua ya 13
Kazi imekamilika, ninatoa picha ya skrini (kwa kuzingatia mabadiliko ya ujanibishaji wa picha ya kwanza iliyoelezewa katika Hatua ya 12).
Ongeza mtindo wa ujazo kwa picha zozote ambazo hazina uwezo wa kukufaa.
