Një mënyrë shumë e thjeshtë për të rrotulluar elementët e një faqe në internet - thjesht aplikoni disa stile të css. Njohja me këtë mësim do t'ju lejojë të vendosni një tifoz të kartës së shpalosur, gjethe të rëna të shpërndara ose foto elegant në një album në faqe. Mësimi përmban një shembull të zbatimit të një albumi fotografik dhe merr parasysh zgjidhjen për të gjithë shfletuesit modernë.
Është e nevojshme
Katër fotografi me gjerësi deri në 450 px
Udhëzimet
Hapi 1
Ky shembull do të përqendrohet në krijimin e një faqeje elegant albumi me fotografi të ndërruara.
Kam përgatitur paraprakisht imazhe (gjerësi 400px) me adresa:
Në të ardhmen, ne do t'u caktojmë ID-ve imazheve sipas emrave të tyre.
Hapi 2
Së pari, ne do të përgatisim një bllok për albumin tonë fotografik duke përdorur etiketën div dhe gjithashtu do t'i shtojmë fotografi duke përdorur etiketën img (secila figurë duhet të jetë e mbyllur në etiketën e saj div), si kjo:
Ju lutemi vini re se ne i kemi caktuar një identifikues bllokut -. Nga identifikuesi, ne mund t'i referohemi bllokut duke përdorur css.
Hapi 3
Tjetra, duhet të vendosni stilet e css në bllok. Lista e stileve: "pozicioni: relativ;" - do të vendosë origjinën nga këndi i sipërm i majtë i bllokut tonë; "diferencë: 50px automatikisht;" - do të vendosë prerjen e bllokut tonë "50px" sipër dhe poshtë pjesës tjetër të përmbajtjes së faqes, si dhe do të vendosë prerjen automatike në të djathtë dhe të majtë, duke e rreshtuar kështu bllokun tonë në qendër; "gjerësia: 900px; lartësia: 650px;" - do të vendosë përkatësisht gjerësinë në 900px dhe lartësinë në 650px.
Lista e specifikuar e stileve duhet të vendoset në këtë mënyrë:
#foto_faqe {
pozicioni: relativ;
diferencë: 0 auto;
gjerësia: 900px;
lartësia: 650 px;
rreshtimi i tekstit: qendra;
}
Vini re përdorimin e "#photo_page" - kështu i referohemi ID-së së bllokut.
Hapi 4
Tani ne do të caktojmë stile të përgjithshme për secilën imazh brenda bllokut të faqes së fotografive. Këto janë qoshe të rrumbullakosura, kufiri gri, sfondi i bardhë, mbushja dhe hija e rënies.
Kjo do të krijojë një efekt fotografik:
#foto_faqe img {
rrezja kufitare: 7px;
bordura: 1px gri e fortë;
sfondi: #ffffff;
mbushje: 10px;
kuti-hije: 2px 2px 10px # 697898;
}
Vini re përdorimin e "#foto_page img" - kjo do t'i referohet të gjitha imazheve brenda bllokut të faqes foto
Hapi 5
Alsoshtë gjithashtu e rëndësishme të shtoni një stil të shkurtër si ky:
#foto_faqe div {
noton: majtas;
}
Zvogëlon të gjitha blloqet brenda bllokut të faqes së fotografive në të majtë.
Hapi 6
Faza e ndërmjetme e mësimit tani ka përfunduar. Nëse puna juaj është e ngjashme me imazhin në screenshot, atëherë ju nuk keni bërë një gabim dhe mund të vazhdoni në hapin tjetër.
Hapi 7
Tani kthehemi të rrotullojmë fotot e postuara. Për këtë na duhet stili i transformimit. Për momentin, në formën e tij të pastër, nuk përdoret, por vetëm me një parashtesë për secilin shfletues në fillim, si kjo:
-vebkit-transformim: rrotullo (vlera);
-moz-transformoj: rrotulloj (vlera);
-o-transformo: rrotullo (vlera);
Ky është stili i rrotullimit për shfletuesit: Google Chrome, Mazilla, Opera (përkatësisht). Në vend të fjalës "vlerë", ne do të fusim një numër me deg në fund, si ky:
90deg - rrotullohuni 90 gradë në drejtim të akrepave të orës.
-5deg - rrotullo -5 gradë në drejtim të akrepave të orës.
Etj
Hapi 8
Stili për foton foto_1:
# foto_1 {
-vebkit-transformim: rrotullo (5deg);
-moz-transformoj: rrotulloj (5deg);
-o-transformoj: rrotulloj (5deg);
}
Imazhi i parë rrotullohet 5 gradë.
Hapi 9
Stili për foto foto_2:
# foto_2 {
-vebkit-transformimi: rrotullo (-3deg);
-moz-transformoj: rrotulloj (-3deg);
-o-transformoj: rrotulloj (-3deg);
}
Imazhi i dytë rrotullohet -3 gradë.
Hapi 10
Stili për foto foto_3:
# foto_3 {
-vebkit-transformim: rrotullo (-2deg);
-moz-transformoj: rrotullo (-2deg);
-o-transformoj: rrotulloj (-2deg);
}
Imazhi i tretë rrotullohet -2 gradë.
Hapi 11
Stili për foto foto_4:
# foto_4 {
-vebkit-transformo: rrotullo (8deg);
-moz-transformoj: rrotulloj (8deg);
-o-transformoj: rrotulloj (8deg);
}
Imazhi i katërt rrotullohet 8 gradë.
Hapi 12
Le të shohim se si mund ta korrigjoni pozicionin e imazheve. Për shembull, ju doni të kompensoni imazhin e parë 20px nga lart dhe 10px nga e majta. Në këtë rast, duhet të përdorni stilin e diferencës. Këtu është mënyra e saktë për ta përdorur atë për rastin tonë:
# foto_1 {
diferencë: 20px -10px -20px 10px;
-vebkit-transformim: rrotullo (5deg);
-moz-transformoj: rrotulloj (5deg);
-o-transformo: rrotullo (5deg);
}
Ju lutemi vini re se vlera e parë e stilit është diferenca e sipërme; e dyta është prerja në të djathtë; e treta është një indent nga poshtë; e katërta - gërma e majtë.
E rëndësishme: në rastin tonë, marzhi i poshtëm është i barabartë me vlerën negative të marzhit të sipërm. Nëse shihni hapësirë të bardhë poshtë fotos në faqen tuaj, përpiquni të fusni fundin e figurës edhe më negativisht.
Hapi 13
Puna është e plotë, unë siguroj një pamje të ekranit (duke marrë parasysh ndryshimin në prerjen e figurës së parë të përshkruar në Hapin 12).
Shtoni stilin e prerjes në çdo imazh që nuk është në gjendje t'ju përshtatet.
