Hyvin yksinkertainen tapa kiertää verkkosivun elementtejä - käytä vain muutama css-tyyli. Tämän oppiaiheen tuntemuksen avulla voit sijoittaa avaamattoman korttipuhaltimen, sironnut pudonneet lehdet tai tyylikkäitä valokuvia sivun albumiin. Oppitunti sisältää esimerkin valokuva-albumin toteuttamisesta ja siinä otetaan huomioon kaikkien nykyaikaisten selainten ratkaisu.
Se on välttämätöntä
Neljä valokuvaa, jopa 450 kuvapistettä leveä
Ohjeet
Vaihe 1
Tässä esimerkissä keskitytään tyylikkään albumin sivun luomiseen käännetyillä valokuvilla.
Valmistelin etukäteen kuvat (leveys 400px) osoitteilla:
Tulevaisuudessa osoitamme kuville tunnukset niiden nimien mukaan.
Vaihe 2
Ensin valmistellaan lohko valokuva-albumillemme div-tagin avulla ja lisätään siihen myös kuvia käyttämällä img-tagia (jokainen kuva on liitettävä omaan div-tagiinsa) seuraavasti:
Huomaa, että olemme antaneet lohkolle tunnisteen -. Tunnisteen avulla voimme viitata lohkoon css: n avulla.
Vaihe 3
Seuraavaksi sinun on asetettava css-tyylit lohkoon. Tyyliluettelo: "position: suhteellinen;" - asettaa alkuperän lohkomme vasemmasta yläkulmasta; "marginaali: 50px auto;" - asettaa lohkon "50px" sisennyksen sivun muun sisällön ylä- ja alapuolelle sekä asettaa automaattisen sisennyksen oikealle ja vasemmalle, kohdistaen siten lohkomme keskelle; "leveys: 900px; korkeus: 650px;" - asettaa leveydeksi 900 kuvapistettä ja korkeudeksi 650 kuvapistettä.
Määritetty tyyliluettelo on sijoitettava tällä tavalla:
#photo_page {
asema: suhteellinen;
marginaali: 0 auto;
leveys: 900px;
korkeus: 650px;
tekstin tasaus: keskellä;
}
Huomaa "#photo_page" -käyttö - tällä tavalla viittaamme lohkotunnukseen.
Vaihe 4
Määritämme nyt yleiset tyylit jokaiselle kuvasivulohkon sisällä olevalle kuvalle. Nämä ovat pyöristetyt kulmat, harmaa reunus, valkoinen tausta, pehmuste ja varjo.
Tämä luo valokuvatehosteen:
#photo_page img {
reunan säde: 7 kuvapistettä;
reunus: 1px kiinteä harmaa;
tausta: #ffffff;
täyte: 10px;
laatikko-varjo: 2px 2px 10px # 697898;
}
Huomaa "#photo_page img" -käyttö - tämä viittaa kaikkiin photo_page-lohkon sisällä oleviin kuviin
Vaihe 5
On myös tärkeää lisätä tällainen lyhyt tyyli:
#photo_page div {
kellua: vasen;
}
Se kutistaa kaikki lohkot photo_page-lohkon sisällä vasemmalle.
Vaihe 6
Oppitunnin välivaihe on nyt saatu päätökseen. Jos työsi on samanlainen kuin kuvakaappauksessa oleva kuva, et ole tehnyt virhettä ja voit siirtyä seuraavaan vaiheeseen.
Vaihe 7
Nyt käännämme käännettyjä valokuvia. Tätä varten tarvitsemme muunnostyylin. Tällä hetkellä puhtaassa muodossaan sitä ei käytetä, vaan vain jokaisen selaimen etuliite alussa, kuten tämä:
-webkit-muuntaa: kiertää (arvo);
-moz-muunnos: kiertää (arvo);
-o-muunnos: kiertää (arvo);
Tämä on selainten kiertotyyli: Google Chrome, Mazilla, Opera (vastaavasti). Lisätään sanan "arvo" sijaan luku, jonka lopussa on deg, kuten tämä:
90 astetta - kierrä 90 astetta myötäpäivään.
-5 astetta - kierrä -5 astetta vastapäivään.
Jne.
Vaihe 8
Valokuvan kuva_1 tyyli:
# valokuva_1 {
-webkit-muunnos: kiertää (5deg);
-moz-muunnos: kiertää (5 astetta);
-o-muunnos: kiertää (5 astetta);
}
Ensimmäistä kuvaa käännetään 5 astetta.
Vaihe 9
Valokuvan kuva_2 tyyli:
# photo_2 {
-webkit-muunnos: kiertää (-3deg);
-moz-muunnos: kiertää (-3deg);
-o-muunnos: kiertää (-3deg);
}
Toista kuvaa käännetään -3 astetta.
Vaihe 10
Valokuvan Photo_3 tyyli:
# photo_3 {
-webkit-muunnos: kiertää (-2deg);
-moz-muunnos: kiertää (-2deg);
-o-muunnos: kiertää (-2deg);
}
Kolmas kuva on käännetty -2 astetta.
Vaihe 11
Valokuvan photo_4 tyyli:
# photo_4 {
-webkit-muunnos: kiertää (8deg);
-moz-muunnos: kiertää (8 astetta);
-o-muunnos: kiertää (8 astetta);
}
Neljäs kuva on käännetty 8 astetta.
Vaihe 12
Katsotaanpa, kuinka voit korjata kuvien sijaintia. Esimerkiksi haluat siirtää ensimmäisen kuvan 20 kuvapistettä ylhäältä ja 10 kuvapistettä vasemmalta. Tässä tapauksessa sinun on käytettävä marginaalityyliä. Tässä on oikea tapa käyttää sitä tapauksessamme:
# valokuva_1 {
marginaali: 20px -10px -20px10px;
-webkit-muunnos: kiertää (5deg);
-moz-muunnos: kiertää (5 astetta);
-o-muunnos: kiertää (5 astetta);
}
Huomaa, että tyylin ensimmäinen arvo on yläreuna; toinen on oikealla oleva luetelmakohta; kolmas on sisennys alhaalta; neljäs - vasen luetelmakohta.
Tärkeää: tapauksessamme alimarginaali on yhtä suuri kuin ylimarginaalin negatiivinen arvo. Jos näet sivun kuvan alla tyhjää tilaa, yritä sisenyttää kuvan alaosaa vielä negatiivisemmin.
Vaihe 13
Työ on valmis, annan kuvakaappauksen (ottaen huomioon vaiheessa 12 kuvatun ensimmäisen kuvan sisennyksen muutoksen).
Lisää sisennystyyli kaikkiin kuviin, jotka eivät ole sinulle sopivaa.
