En veldig enkel måte å rotere elementene på en nettside - bare bruk noen css-stiler. Gjør deg kjent med denne leksjonen, kan du plassere en utfoldet kortvifte, spredte fallne blader eller stilige bilder i et album på siden. Leksjonen inneholder et eksempel på implementering av et fotoalbum og tar hensyn til løsningen for alle moderne nettlesere.
Det er nødvendig
Fire bilder med en bredde på opptil 450 px
Bruksanvisning
Trinn 1
Dette eksemplet vil fokusere på å lage en stilig albumside med roterte bilder.
Jeg forberedte forhåndsbilder (bredde 400 px) med adresser:
I fremtiden vil vi tildele ID-er til bilder i henhold til navnene deres.
Steg 2
Først vil vi forberede en blokk for fotoalbumet vårt ved hjelp av div-taggen, og også legge til bilder til det ved hjelp av img-taggen (hvert bilde må være vedlagt i sin egen div-tag), slik:
Vær oppmerksom på at vi har tildelt en identifikator til blokken -. Ved identifikatoren kan vi referere til blokken ved hjelp av css.
Trinn 3
Deretter må du sette css-stilene til blokken. Liste over stiler: "posisjon: relativ;" - vil sette opprinnelsen fra øvre venstre hjørne av blokken vår; "margin: 50px auto;" - vil sette innrykk av blokken "50px" over og under resten av sideinnholdet, samt sette den automatiske innrykk til høyre og venstre, og dermed justere blokken vår i midten; "bredde: 900px; høyde: 650px;" - vil sette bredden til henholdsvis 900 px og høyden til 650 px.
Den angitte listen over stiler må plasseres på denne måten:
#foto_side {
posisjon: relativ;
margin: 0 auto;
bredde: 900px;
høyde: 650px;
tekstjustering: sentrum;
}
Legg merke til bruken av "#photo_page" - slik vi refererer til blokk-ID.
Trinn 4
Nå vil vi tildele generelle stiler for hvert bilde i blokken photo_page. Disse er avrundede hjørner, grå kant, hvit bakgrunn, polstring og skygge.
Dette vil skape en fotografisk effekt:
#photo_page img {
border-radius: 7px;
kant: 1 px solid grå;
bakgrunn: #ffffff;
polstring: 10px;
bokseskygge: 2px 2px 10px # 697898;
}
Legg merke til bruken av "#photo_page img" - dette vil referere til alle bilder inne i photo_page-blokken
Trinn 5
Det er også viktig å legge til en kort stil som dette:
#photo_page div {
flyte: venstre;
}
Den krymper alle blokker inne i blokken photo_page til venstre.
Trinn 6
Mellomfasen av leksjonen er nå fullført. Hvis arbeidet ditt ligner på bildet på skjermbildet, har du ikke gjort en feil og kan fortsette til neste trinn.
Trinn 7
Nå snur vi oss for å rotere de postede bildene. For dette trenger vi transformasjonsstilen. For øyeblikket, i sin rene form, brukes den ikke, men bare med et prefiks for hver nettleser i begynnelsen, slik:
-webkit-transform: roter (verdi);
-moz-transform: roter (verdi);
-o-transform: roter (verdi);
Dette er rotasjonsstilen for nettlesere: henholdsvis Google Chrome, Mazilla, Opera. I stedet for ordet "verdi" vil vi sette inn et tall med deg på slutten, slik:
90 grader - roter 90 grader med klokken.
-5deg - roter -5 grader mot klokken.
Etc.
Trinn 8
Stil for foto foto_1:
# foto_1 {
-webkit-transform: roter (5deg);
-moz-transform: roter (5deg);
-o-transform: roter (5deg);
}
Det første bildet roteres 5 grader.
Trinn 9
Stil for fotofoto_2:
# foto_2 {
-webkit-transform: roter (-3deg);
-moz-transform: roter (-3deg);
-o-transform: roter (-3deg);
}
Det andre bildet roteres -3 grader.
Trinn 10
Stil for foto foto_3:
# foto_3 {
-webkit-transform: roter (-2deg);
-moz-transform: roter (-2deg);
-o-transform: roter (-2deg);
}
Det tredje bildet roteres -2 grader.
Trinn 11
Stil for foto foto_4:
# foto_4 {
-webkit-transform: roter (8deg);
-moz-transform: roter (8deg);
-o-transform: roter (8deg);
}
Det fjerde bildet roteres 8 grader.
Trinn 12
La oss se hvordan du kan korrigere posisjonen til bilder. For eksempel vil du forskyve det første bildet 20px fra toppen og 10px fra venstre. I dette tilfellet må du bruke marginstilen. Her er den riktige måten å bruke det på for vår sak:
# foto_1 {
margin: 20px -10px -20px 10px;
-webkit-transform: roter (5deg);
-moz-transform: roter (5deg);
-o-transform: roter (5deg);
}
Vær oppmerksom på at den første verdien av stilen er toppmargen; det andre er innrykk til høyre; den tredje er et innrykk fra bunnen; fjerde - venstre innrykk.
Viktig: i vårt tilfelle er bunnmargen lik den negative verdien til toppmargenen. Hvis du ser hvite mellomrom under bildet på siden din, kan du prøve å skjære inn bunnen av bildet enda mer negativt.
Trinn 13
Arbeidet er fullført, jeg gir et skjermbilde (tar hensyn til endringen i fordypningen av det første bildet beskrevet i trinn 12).
Legg innrykkstil til bilder som ikke er i stand til å passe deg.
