Isang napaka-simpleng paraan upang paikutin ang mga elemento ng isang pahina ng website - maglapat lamang ng ilang mga estilo ng css. Ang pamilyar sa araling ito ay magbibigay-daan sa iyo upang maglagay ng isang hindi nakabukas na card fan, nakakalat na mga nahulog na dahon o naka-istilong larawan sa isang album sa pahina. Naglalaman ang aralin ng isang halimbawa ng pagpapatupad ng isang photo album at isinasaalang-alang ang solusyon para sa lahat ng mga modernong browser.
Kailangan iyon
Apat na mga larawan hanggang sa 450px ang lapad
Panuto
Hakbang 1
Ang halimbawang ito ay magtutuon sa paglikha ng isang naka-istilong pahina ng album na may mga paikot na larawan.
Inihanda ko nang maaga ang mga imahe (lapad 400px) na may mga address:
Sa hinaharap, magtatalaga kami ng mga ID sa mga imahe ayon sa kanilang mga pangalan.
Hakbang 2
Una, maghahanda kami ng isang bloke para sa aming photo album gamit ang div tag, at magdagdag din ng mga larawan dito gamit ang img tag (ang bawat imahe ay dapat na nakapaloob sa sarili nitong div tag), tulad nito:
Mangyaring tandaan na nagtalaga kami ng isang identifier sa block -. Sa pamamagitan ng identifier, maaari kaming mag-refer sa block gamit ang css.
Hakbang 3
Susunod, kailangan mong itakda ang mga estilo ng css sa bloke. Listahan ng mga istilo: "posisyon: kamag-anak;" - Itatakda ang pinagmulan mula sa kaliwang sulok sa itaas ng aming bloke; "margin: 50px auto;" - Itatakda ang indentation ng aming block na "50px" sa itaas at sa ibaba ng natitirang nilalaman ng pahina, pati na rin itakda ang awtomatikong indentation sa kanan at kaliwa, sa gayon ay nakahanay ang aming bloke sa gitna; "lapad: 900px; taas: 650px;" - Itatakda ang lapad sa 900px at ang taas sa 650px, ayon sa pagkakabanggit.
Ang tinukoy na listahan ng mga estilo ay dapat ilagay sa ganitong paraan:
#photo_page {
posisyon: kamag-anak;
margin: 0 auto;
lapad: 900px;
taas: 650px;
text-align: gitna;
}
Tandaan ang paggamit ng "#photo_page" - ito ang paraan ng pag-refer sa block ID.
Hakbang 4
Ngayon ay magtatalaga kami ng mga pangkalahatang istilo para sa bawat imahe sa loob ng photo_page block. Ito ang mga bilugan na sulok, kulay abong hangganan, puting background, padding, at drop shadow.
Lilikha ito ng isang potograpiyang epekto:
#photo_page img {
border-radius: 7px;
hangganan: 1px solidong kulay-abo;
background: #ffffff;
padding: 10px;
box-shadow: 2px 2px 10px # 697898;
}
Tandaan ang paggamit ng "#photo_page img" - ito ay tumutukoy sa lahat ng mga imahe sa loob ng photo_page block
Hakbang 5
Mahalaga rin na magdagdag ng isang maikling estilo tulad nito:
#photo_page div {
lumutang pakaliwa;
}
Pinapaliit nito ang lahat ng mga bloke sa loob ng photo_page block sa kaliwa.
Hakbang 6
Natapos na ang intermediate na yugto ng aralin. Kung ang iyong trabaho ay katulad ng imahe sa screenshot, pagkatapos ay hindi ka nakagawa ng isang pagkakamali at maaaring magpatuloy sa susunod na hakbang.
Hakbang 7
Ngayon ay liliko kami upang paikutin ang nai-post na mga larawan. Para sa mga ito kailangan namin ng istilo ng pagbabago. Sa ngayon, sa dalisay na anyo nito, hindi ito ginagamit, ngunit mayroon lamang isang unlapi para sa bawat browser sa simula, tulad nito:
-webkit-transform: paikutin (halaga);
-moz-transform: paikutin (halaga);
-o-transform: paikutin (halaga);
Ito ang istilo ng pag-ikot para sa mga browser: Google Chrome, Mazilla, Opera (ayon sa pagkakabanggit). Sa halip na salitang "halaga", maglalagay kami ng isang numero na may deg sa dulo, tulad nito:
90deg - paikutin ang 90 degree na pakaliwa.
-5deg - paikutin ang -5 degree na pakaliwa.
Atbp
Hakbang 8
Estilo para sa larawan sa larawan_1:
# larawan_1 {
-webkit-transform: paikutin (5deg);
-moz-transform: paikutin (5deg);
-o-transform: paikutin (5deg);
}
Ang unang imahe ay pinaikot ng 5 degree.
Hakbang 9
Estilo para sa larawan ng larawan_2:
# larawan_2 {
-webkit-transform: paikutin (-3deg);
-moz-transform: paikutin (-3deg);
-o-transform: paikutin (-3deg);
}
Ang pangalawang imahe ay pinaikot -3 degree.
Hakbang 10
Estilo para sa larawan photo_3:
# larawan_3 {
-webkit-transform: paikutin (-2deg);
-moz-transform: paikutin (-2deg);
-o-transform: paikutin (-2deg);
}
Ang pangatlong imahe ay pinaikot -2 degree.
Hakbang 11
Estilo para sa larawan photo_4:
# larawan_4 {
-webkit-transform: paikutin (8deg);
-moz-transform: paikutin (8deg);
-o-transform: paikutin (8deg);
}
Ang ika-apat na imahe ay pinaikot ng 8 degree.
Hakbang 12
Tingnan natin kung paano mo maitatama ang posisyon ng mga imahe. Halimbawa, nais mong i-offset ang unang imahe 20px mula sa itaas at 10px mula sa kaliwa. Sa kasong ito, kailangan mong gamitin ang istilo ng margin. Narito ang tamang paraan upang magamit ito para sa aming kaso:
# larawan_1 {
margin: 20px -10px -20px 10px;
-webkit-transform: paikutin (5deg);
-moz-transform: paikutin (5deg);
-o-transform: paikutin (5deg);
}
Mangyaring tandaan na ang unang halaga ng estilo ay ang nangungunang margin; ang pangalawa ay ang indent sa kanan; ang pangatlo ay isang indent mula sa ilalim; pang-apat - kaliwang indent.
Mahalaga: sa aming kaso, ang ilalim na margin ay katumbas ng negatibong halaga ng tuktok na margin. Kung nakakita ka ng puting puwang sa ibaba ng imahe sa iyong pahina, subukang i-indent ang ilalim ng imahe nang mas negatibo.
Hakbang 13
Kumpleto na ang trabaho, nagbibigay ako ng isang screenshot (isinasaalang-alang ang pagbabago sa indentation ng unang imahe na inilarawan sa Hakbang 12).
Magdagdag ng istilo ng indentation sa anumang mga imahe na wala sa posisyon upang umangkop sa iyo.
