Väga lihtne viis veebisaidi lehe elementide pööramiseks - piisab vaid mõne CSS-i stiili kasutamisest. Selle õppetundiga tutvumine võimaldab teil lehe albumisse asetada lahtikäiva kaardiventilaatori, laialivalgunud langenud lehed või stiilsed fotod. Tund sisaldab näite fotoalbumi rakendamisest ja võtab arvesse kõigi tänapäevaste brauserite lahendust.
See on vajalik
Neli kuni 450px laiust fotot
Juhised
Samm 1
Selles näites keskendutakse pööratud fotodega stiilse albumilehe loomisele.
Valmistasin eelnevalt ette pildid (laius 400px) aadressidega:
Edaspidi määrame piltidele ID-d nende nimede järgi.
2. samm
Esiteks valmistame div-sildi abil oma fotoalbumi jaoks ploki ja lisame sellele fotod ka img-märgendi abil (iga pilt peab olema oma div-märgendis):
Pange tähele, et oleme määranud plokile identifikaatori -. Identifikaatori järgi võime viidata plokile css abil.
3. samm
Järgmisena peate blokeerima css-stiilid. Stiilide loend: "position: suhteline;" - määrab alguspunkti meie ploki vasakus ülanurgas; "veeris: 50px auto;" - seab meie ploki taande "50px" ülejäänud lehe sisu kohale ja alla, samuti seab automaatse taande paremale ja vasakule, joondades meie ploki keskele; "laius: 900 pikslit; kõrgus: 650 pikslit;" - seab laiuseks vastavalt 900 pikslit ja kõrguseks 650 pikslit.
Määratud stiilide loend tuleb paigutada järgmiselt:
#photo_page {
positsioon: sugulane;
veeris: 0 automaatne;
laius: 900 pikslit;
kõrgus: 650px;
teksti joondamine: keskel;
}
Pange tähele "#photo_page" kasutamist - nii viidatakse ploki ID-le.
4. samm
Nüüd määrame iga pildi jaoks pildi_lehe plokis üldised stiilid. Need on ümarad nurgad, hall ääris, valge taust, polsterdus ja varju.
See loob fotoefekti:
#photo_page img {
piiri raadius: 7px;
ääris: 1px ühtlane hall;
taust: #ffffff;
polster: 10px;
box-shadow: 2px 2px 10px # 697898;
}
Pange tähele "#photo_page img" kasutamist - see viitab kõigile pildi_bloki plokis olevatele piltidele
5. samm
Samuti on oluline lisada selline lühike stiil:
#photo_page div {
ujuk: vasak;
}
See kahandab kõiki plokke photo_page vasakul asuvaid plokke.
6. samm
Tunni vaheetapp on nüüd läbi. Kui teie töö sarnaneb ekraanipildil olevale pildile, pole te viga teinud ja võite minna järgmise sammu juurde.
7. samm
Nüüd pöördume postitatud fotode pööramiseks. Selleks vajame teisendusstiili. Praegu ei kasutata seda puhtal kujul, vaid ainult alguses iga brauseri eesliitega:
-webkit-transform: pöörake (väärtus);
-moz-transform: pöörata (väärtus);
-o-muundamine: pööramine (väärtus);
See on brauserite pööramisstiil: vastavalt Google Chrome, Mazilla, Opera. Sõna "väärtus" asemel lisame lõppu numbri, mille deg on järgmine:
90 kraadi - pöörake 90 kraadi päripäeva.
-5deg - pöörake -5 kraadi vastupäeva.
Jne.
8. samm
Foto foto_1 stiil:
# foto_1 {
-veebikomplekti teisendamine: pööramine (5deg);
-moz-muundamine: pööramine (5deg);
-o-muundamine: pööramine (5deg);
}
Esimest pilti pööratakse 5 kraadi.
9. samm
Foto foto_2 stiil:
# foto_2 {
-webkit-transform: pöörake (-3deg);
-moz-muundamine: pööramine (-3deg);
-o-muundamine: pööramine (-3deg);
}
Teine pilt on pööratud -3 kraadi.
10. samm
Foto foto_3 stiil:
# photo_3 {
-veebikomplekti teisendamine: pööramine (-2deg);
-moz-muundamine: pööramine (-2deg);
-o-muundamine: pööramine (-2deg);
}
Kolmas pilt on pööratud -2 kraadi.
11. samm
Foto foto_4 stiil:
# foto_4 {
-veebikomplekti teisendamine: pööramine (8deg);
-moz-muundamine: pööramine (8deg);
-o-muundamine: pööramine (8deg);
}
Neljas pilt on pööratud 8 kraadi.
12. samm
Vaatame, kuidas saate piltide positsiooni parandada. Näiteks soovite esimese pildi nihutada ülevalt 20 pikslit ja vasakult 10 pikslit. Sellisel juhul peate kasutama veerise stiili. Siin on õige viis seda meie juhtumi jaoks kasutada:
# foto_1 {
veeris: 20px -10px -20px10px;
-veebikomplekti teisendamine: pööramine (5deg);
-moz-muundamine: pööramine (5deg);
-o-muundamine: pööramine (5deg);
}
Pange tähele, et stiili esimene väärtus on ülemine veeris; teine on taane paremale; kolmas on altpoolt taane; neljas - vasak taane.
Tähtis: meie puhul on alumine veeris võrdne ülemise veerise negatiivse väärtusega. Kui näete oma lehe pildi all valget ruumi, proovige pildi alaosa veelgi negatiivsemalt taandada.
13. samm
Töö on valmis, esitan ekraanipildi (võttes arvesse 12. etapis kirjeldatud esimese pildi taande muutust).
Lisage taandestiil kõikidele piltidele, mis pole teie jaoks sobivad.