Zelo preprost način zasuka elementov spletne strani - uporabite le nekaj stilov css. Seznanitev s to lekcijo vam bo omogočila, da v album na stran postavite razgrnjen ventilator za kartice, raztresene odpadle liste ali elegantne fotografije. Lekcija vsebuje primer izvedbe fotoalbuma in upošteva rešitev za vse sodobne brskalnike.
Potrebno je
Štiri fotografije do 450 slikovnih pik
Navodila
Korak 1
Ta primer se bo osredotočil na ustvarjanje elegantne strani albuma z zasukanimi fotografijami.
Vnaprej sem pripravil slike (širina 400 px) z naslovi:
V prihodnosti bomo slikam dodelili ID-je glede na njihova imena.
2. korak
Najprej bomo pripravili blok za naš foto album z uporabo oznake div in mu dodali fotografije z uporabo oznake img (vsaka slika mora biti zaprta v svojo oznako div), kot je ta:
Upoštevajte, da smo bloku dodelili identifikator -. Z identifikatorjem se lahko na blok sklicujemo s pomočjo css.
3. korak
Nato morate na blok nastaviti sloge css. Seznam slogov: "position: relative;" - bo nastavil izvor iz zgornjega levega kota našega bloka; "marža: 50 slikovnih pik samodejno;" - bo postavil vdolbino našega bloka "50px" nad in pod ostalo vsebino strani, kot tudi samodejno zamik v desno in levo, s čimer bo poravnal naš blok v sredini; "širina: 900 slikovnih pik; višina: 650 slikovnih pik;" - bo določil širino na 900px in višino na 650px.
Navedeni seznam slogov je treba postaviti na ta način:
#photo_page {
položaj: sorodnik;
marža: 0 samodejno;
širina: 900px;
višina: 650px;
poravnava besedila: sredina;
}
Upoštevajte uporabo "#photo_page" - tako se sklicujemo na ID bloka.
4. korak
Zdaj bomo dodelili splošne sloge za vsako sliko znotraj bloka photo_page. To so zaobljeni vogali, siva obroba, belo ozadje, oblazinjenje in senca.
To bo ustvarilo fotografski učinek:
#photo_page img {
polmer obrobe: 7 slikovnih pik;
obroba: 1px trdno siva;
ozadje: #ffffff;
oblazinjenje: 10 slikovnih pik;
box-shadow: 2px 2px 10px # 697898;
}
Upoštevajte uporabo "#photo_page img" - to se bo nanašalo na vse slike znotraj bloka photo_page
5. korak
Prav tako je pomembno dodati kratek slog, kot je ta:
#photo_page div {
plovec: levo;
}
Zmanjša vse bloke znotraj bloka photo_page v levo.
6. korak
Vmesna stopnja lekcije je zdaj končana. Če je vaše delo podobno sliki na posnetku zaslona, se niste zmotili in lahko nadaljujete z naslednjim korakom.
7. korak
Zdaj obračamo objavljene fotografije. Za to potrebujemo slog preobrazbe. Trenutno se v čisti obliki ne uporablja, temveč le s predpono za vsak brskalnik na začetku, takole:
-webkit-transform: zasukaj (vrednost);
-moz-transform: zasukaj (vrednost);
-o-transformiraj: zasukaj (vrednost);
To je slog rotacije za brskalnike: Google Chrome, Mazilla, Opera (oziroma). Namesto besede "vrednost" bomo na koncu vstavili številko z deg, takole:
90 stopinj - zavrtite za 90 stopinj v smeri urnega kazalca.
-5deg - zavrtite -5 stopinj v nasprotni smeri urnega kazalca.
Itd.
8. korak
Slog za fotografijo photo_1:
# fotografija_1 {
-webkit-transform: zasukaj (5deg);
-moz-preobrazba: zasukaj (5deg);
-o-preoblikovanje: vrtenje (5 stopinj);
}
Prva slika se zavrti za 5 stopinj.
9. korak
Slog za fotografijo photo_2:
# fotografija_2 {
-webkit-transform: zasukaj (-3deg);
-moz-pretvorba: zasukaj (-3deg);
-o-transformiraj: zasukaj (-3deg);
}
Druga slika se zavrti za -3 stopinje.
10. korak
Slog za fotografijo photo_3:
# fotografija_3 {
-webkit-transform: zasukaj (-2deg);
-moz-preobrazba: zasukaj (-2deg);
-o-preoblikovanje: vrtenje (-2deg);
}
Tretja slika se zasuka za -2 stopinje.
11. korak
Slog za fotografijo photo_4:
# fotografija_4 {
-webkit-transform: zasukaj (8deg);
-moz-preobrazba: zasukaj (8deg);
-o-preoblikovanje: vrtenje (8deg);
}
Četrta slika se zavrti za 8 stopinj.
12. korak
Poglejmo, kako lahko popravite položaj slik. Na primer, želite premakniti prvo sliko 20px od zgoraj in 10px od leve. V tem primeru morate uporabiti slog roba. Tukaj je pravilen način uporabe za naš primer:
# fotografija_1 {
marža: 20px -10px -20px 10px;
-webkit-transform: zasukaj (5deg);
-moz-preobrazba: zasukaj (5deg);
-o-preoblikovanje: vrtenje (5deg);
}
Upoštevajte, da je prva vrednost sloga zgornji rob; druga je alinea na desni; tretja je alinea od spodaj; četrta - leva alinea.
Pomembno: v našem primeru je spodnji rob enak negativni vrednosti zgornjega roba. Če pod sliko na svoji strani vidite prazen prostor, poskusite spodnji del slike zamakniti še bolj negativno.
13. korak
Delo je končano, priskrbim posnetek zaslona (ob upoštevanju spremembe zamika prve slike, opisane v 12. koraku).
Slikam, ki niso v položaju, ki vam ustreza, dodajte slog zamika.
