En meget enkel måde at rotere elementerne på en websideside på - brug kun et par css-stilarter. Bekendtgørelse med denne lektion giver dig mulighed for at placere en foldet kortblæser, spredte faldne blade eller stilfulde fotos i et album på siden. Lektionen indeholder et eksempel på implementeringen af et fotoalbum og tager højde for løsningen til alle moderne browsere.
Er det nødvendigt
Fire fotos op til 450 px bred
Instruktioner
Trin 1
Dette eksempel vil fokusere på at oprette en stilfuld albumside med roterede fotos.
Jeg forberedte på forhånd billeder (bredde 400 px) med adresser:
I fremtiden vil vi tildele ID'er til billeder efter deres navne.
Trin 2
Først forbereder vi en blok til vores fotoalbum ved hjælp af div-tagget og tilføjer også fotos til det ved hjælp af img-tagget (hvert billede skal være vedlagt i sit eget div-tag), sådan her:
Bemærk, at vi har tildelt en identifikator til blokken -. Ved identifikatoren kan vi henvise til blokken ved hjælp af css.
Trin 3
Dernæst skal du indstille css-stilarterne til blokken. Liste over typografier: "position: relative;" - indstiller oprindelsen fra det øverste venstre hjørne af vores blok; "margin: 50 px auto;" - vil indstille indrykningen af vores blok "50px" over og under resten af sideindholdet, samt indstille den automatiske indrykning til højre og venstre og dermed justere vores blok i midten; "bredde: 900px; højde: 650px;" - indstiller bredden til henholdsvis 900 pixel og højden til 650 pixel.
Den angivne liste over typografier skal placeres på denne måde:
#foto_side {
position: relativ;
margen: 0 auto;
bredde: 900px;
højde: 650px;
tekstjustering: center;
}
Bemærk brugen af "#photo_page" - sådan henviser vi til blok-ID'et.
Trin 4
Nu tildeler vi generelle stilarter for hvert billede inde i blokken photo_page. Disse er afrundede hjørner, grå kant, hvid baggrund, polstring og skygge.
Dette vil skabe en fotografisk effekt:
#foto_side img {
border-radius: 7px;
kant: 1 px solid grå;
baggrund: #ffffff;
polstring: 10 px;
box-shadow: 2px 2px 10px # 697898;
}
Bemærk brugen af "#photo_page img" - dette refererer til alle billeder inde i photo_page-blokken
Trin 5
Det er også vigtigt at tilføje en kort stil som denne:
#foto_side div {
flyde: venstre;
}
Det krymper alle blokke inde i blokken photo_page til venstre.
Trin 6
Det mellemliggende trin i lektionen er nu afsluttet. Hvis dit arbejde ligner billedet på skærmbilledet, har du ikke begået en fejl og kan fortsætte til næste trin.
Trin 7
Nu vender vi os for at rotere de indsendte fotos. Til dette har vi brug for transformeringsstil. I øjeblikket bruges den ikke i sin rene form, men kun med et præfiks for hver browser i starten, sådan:
-webkit-transformation: roter (værdi);
-moz-transformation: roter (værdi);
-o-transform: roter (værdi);
Dette er rotationstil for browsere: henholdsvis Google Chrome, Mazilla, Opera. I stedet for ordet "værdi" indsætter vi et tal med deg i slutningen, sådan:
90 grader - drej 90 grader med uret.
-5deg - roter -5 grader mod uret.
Etc.
Trin 8
Stil til foto foto_1:
# foto_1 {
-webkit-transformation: roter (5deg);
-moz-transformation: roter (5deg);
-o-transformation: roter (5deg);
}
Det første billede roteres 5 grader.
Trin 9
Stil til foto foto_2:
# foto_2 {
-webkit-transformation: roter (-3deg);
-moz-transformation: roter (-3deg);
-o-transformation: roter (-3deg);
}
Det andet billede drejes -3 grader.
Trin 10
Stil til foto foto_3:
# foto_3 {
-webkit-transformation: roter (-2deg);
-moz-transformation: roter (-2deg);
-o-transformation: roter (-2deg);
}
Det tredje billede drejes -2 grader.
Trin 11
Stil til foto foto_4:
# foto_4 {
-webkit-transformation: roter (8deg);
-moz-transformation: roter (8deg);
-o-transformation: roter (8deg);
}
Det fjerde billede drejes 8 grader.
Trin 12
Lad os se, hvordan du kan rette placeringen af billeder. For eksempel vil du udligne det første billede 20px fra toppen og 10px fra venstre. I dette tilfælde skal du bruge margenstil. Her er den rigtige måde at bruge det til vores sag på:
# foto_1 {
margen: 20px -10px -20px 10px;
-webkit-transformation: roter (5deg);
-moz-transformation: roter (5deg);
-o-transformation: roter (5deg);
}
Bemærk, at den første værdi af stilen er topmargenen; det andet er indrykket til højre; det tredje er et led fra bunden; fjerde - venstre indrykning.
Vigtigt: i vores tilfælde er den nederste margen lig med den negative værdi af den øverste margen. Hvis du ser hvidt mellemrum under billedet på din side, så prøv at indrykke bunden af billedet endnu mere negativt.
Trin 13
Arbejdet er afsluttet, jeg giver et screenshot (under hensyntagen til ændringen i fordybningen af det første billede beskrevet i trin 12).
Føj indrykningsstil til alle billeder, der ikke er i stand til at passe dig.
