Nagyon egyszerű módja a weboldal oldalainak elforgatásának - csak néhány css stílust kell alkalmazni. A lecke megismerése lehetővé teszi, hogy kibontott kártyarajongót, szétszóródott lehullott leveleket vagy stílusos fotókat helyezzen el egy albumon az oldalon. A lecke egy példát tartalmaz egy fotóalbum megvalósítására, és figyelembe veszi az összes modern böngésző megoldását.
Szükséges
Négy, legfeljebb 450 képpont széles kép
Utasítás
1. lépés
Ez a példa egy stílusos albumoldal létrehozására összpontosít elforgatott fotókkal.
Előre elkészítettem a képeket (szélessége 400 képpont) címmel:
A jövőben a képekhez azonosítót rendelünk a nevük szerint.
2. lépés
Először elkészítünk egy blokkot a fotóalbumunkhoz a div tag használatával, és fényképeket is hozzáadunk az img tag segítségével (minden képet a saját div tag-jében kell elhelyezni), így:
Felhívjuk figyelmét, hogy a blokkhoz azonosítót rendeltünk. Az azonosító alapján hivatkozhatunk a blokkra a css használatával.
3. lépés
Ezután be kell állítania a css stílusokat a blokkra. Stílusok listája: "position: relatív;" - a blokk bal felső sarkából állítja be az origót; "margó: 50 képpont automatikus;" - beállítja az "50px" blokk behúzását az oldal többi tartalma felett és alatt, valamint az automatikus behúzást jobbra és balra állítja, így a blokkunkat középre igazítja; "szélesség: 900 képpont; magasság: 650 képpont;" - a szélességet 900 képpontra, a magasságot pedig 650 képpontra állítja.
A megadott stíluslistát így kell elhelyezni:
#photo_page {
pozíció: rokon;
margó: 0 auto;
szélesség: 900 képpont;
magasság: 650px;
text-align: center;
}
Vegye figyelembe a "#photo_page" használatát - így hivatkozunk a blokkazonosítóra.
4. lépés
Most minden egyes képhez általános stílust rendelünk a photo_page blokkban. Ezek lekerekített sarkok, szürke szegély, fehér háttér, párnázás és árnyék.
Ez fényképészeti hatást hoz létre:
#photo_page img {
határ-sugár: 7px;
szegély: 1px egyszínű szürke;
háttér: #ffffff;
párnázás: 10px;
box-shadow: 2px 2px 10px # 697898;
}
Vegye figyelembe a "#photo_page img" használatát - ez a photo_page blokkban található összes képre vonatkozik
5. lépés
Fontos egy ilyen rövid stílus hozzáadása is:
#photo_page div {
balra lebeg;
}
Összehúzza az összes blokkot a photo_page blokkon belül balra.
6. lépés
A lecke közbenső szakasza most befejeződött. Ha munkája hasonló a képernyőképen látható képhez, akkor nem hibázott, és folytathatja a következő lépéssel.
7. lépés
Most a kiküldött fotókat forgatjuk. Ehhez szükségünk van a transzformációs stílusra. Jelenleg tiszta formában nem használják, hanem csak az elején minden böngészőhöz tartozó előtaggal, így:
-webkit-transzformáció: forgatás (érték);
-moz-transzformáció: forgatás (érték);
-o-transzformáció: forgatás (érték);
Ez a böngészők forgatási stílusa: Google Chrome, Mazilla, Opera (ill.). Az "érték" szó helyett beírunk egy számot, amelynek deg vége a következő:
90 fok - forgassa 90 fokkal az óramutató járásával megegyező irányba.
-5deg - forgassa -5 fokkal az óramutató járásával ellentétes irányba.
Stb.
8. lépés
Stílus a fotó_1 fotóhoz:
# fotó_1 {
-webkit-transzformáció: forgatás (5deg);
-moz-transzformáció: forgatás (5deg);
-o-transzformáció: forgatás (5deg);
}
Az első képet 5 fokkal elforgatják.
9. lépés
Stílus a fotó_2 fotóhoz:
# photo_2 {
-webkit-transzformáció: forgatás (-3deg);
-moz-transzformáció: forgatás (-3deg);
-o-transzformáció: forgatás (-3deg);
}
A második kép elforgatása -3 fokkal történik.
10. lépés
Stílus a fotó_3 fotóhoz:
# photo_3 {
-webkit-transzformáció: forgatás (-2deg);
-moz-transzformáció: forgatás (-2deg);
-o-transzformáció: forgatás (-2deg);
}
A harmadik képet elforgatjuk -2 fokkal.
11. lépés
A fotó fotó_4 stílusa:
# photo_4 {
-webkit-transzformáció: forgatás (8deg);
-moz-transzformáció: forgatás (8deg);
-o-transzformáció: forgatás (8deg);
}
A negyedik képet 8 fokkal elforgatják.
12. lépés
Nézzük meg, hogyan javíthatja a képek helyzetét. Például az első képet 20 képpel felülről és 10 képpont balról szeretné eltolni. Ebben az esetben a margóstílust kell használnia. Itt a helyes módszer a mi esetünkben történő felhasználásra:
# fotó_1 {
margó: 20px -10px -20px 10px;
-webkit-transzformáció: forgatás (5deg);
-moz-transzformáció: forgatás (5deg);
-o-transzformáció: forgatás (5deg);
}
Felhívjuk figyelmét, hogy a stílus első értéke a felső margó; a második a jobb oldali behúzás; a harmadik alulról behúzás; negyedik - bal behúzás.
Fontos: esetünkben az alsó margó megegyezik a felső margó negatív értékével. Ha az oldalon lévő kép alatt fehér szóközt lát, próbálja még negatívabban behúzni a kép alját.
13. lépés
A munka befejeződött, képernyőképet adok (figyelembe véve az első kép bemélyedésében a 12. lépésben leírt változást).
Adjon behúzási stílust minden olyan képhez, amely nincs megfelelő helyzetben az Ön számára.
