Ļoti vienkāršs veids, kā pagriezt vietnes lapas elementus - vienkārši lietojiet dažus CSS stilus. Iepazīšanās ar šo nodarbību ļaus lapas albumā ievietot neizlocītu karšu ventilatoru, izkaisītas kritušās lapas vai stilīgus fotoattēlus. Nodarbībā ir fotoalbuma ieviešanas piemērs un ņemts vērā risinājums visām mūsdienu pārlūkprogrammām.
Tas ir nepieciešams
Četras fotogrāfijas līdz 450 pikseļu platumā
Instrukcijas
1. solis
Šis piemērs koncentrēsies uz stilīgas albuma lapas izveidošanu ar pagrieztiem fotoattēliem.
Iepriekš sagatavoju attēlus (platums 400 pikseļi) ar adresēm:
Nākotnē attēliem piešķirsim ID pēc to nosaukumiem.
2. solis
Vispirms mēs sagatavosim bloku mūsu fotoalbumam, izmantojot div tagu, kā arī pievienosim tam fotoattēlus, izmantojot tagu img (katram attēlam jābūt ievietotam savā div tagā), piemēram:
Lūdzu, ņemiet vērā, ka blokam esam piešķīruši identifikatoru -. Pēc identifikatora mēs varam atsaukties uz bloku, izmantojot css.
3. solis
Pēc tam blokā jāiestata css stili. Stilu saraksts: "position: relative;" - iestatīs izcelsmi no mūsu bloka augšējā kreisā stūra; "margin: 50px auto;" - iestatīs mūsu bloka "50px" atkāpi virs un zem pārējā lapas satura, kā arī iestatīs automātisko atkāpi pa labi un pa kreisi, tādējādi izlīdzinot mūsu bloku centrā; "platums: 900 pikseļi; augstums: 650 pikseļi;" - attiecīgi iestatīs platumu līdz 900 pikseļiem un augstumu līdz 650 pikseļiem.
Norādītais stilu saraksts jānovieto šādi:
#photo_page {
amats: radinieks;
margin: 0 auto;
platums: 900 pikseļi;
augstums: 650px;
text-align: center;
}
Ievērojiet "#photo_page" lietošanu - šādi mēs atsaucamies uz bloka ID.
4. solis
Tagad katram attēlam, kas atrodas blokā photo_page, tiks piešķirti vispārīgi stili. Tie ir noapaļoti stūri, pelēka apmale, balts fons, polsterējums un ēna.
Tas radīs fotografēšanas efektu:
#photo_page img {
apmales rādiuss: 7px;
apmale: 1px vienkrāsains;
fons: #ffffff;
polsterējums: 10px;
box-shadow: 2px 2px 10px # 697898;
}
Ievērojiet "#photo_page img" lietošanu - tas attieksies uz visiem attēliem bloka photo_page iekšpusē
5. solis
Ir arī svarīgi pievienot šādu īsu stilu:
#photo_page div {
pludiņš: pa kreisi;
}
Tas samazina visus blokus photo_page bloka iekšpusē pa kreisi.
6. solis
Stundas starpposms tagad ir pabeigts. Ja jūsu darbs ir līdzīgs attēlam ekrānuzņēmumā, tad neesat kļūdījies un varat pāriet uz nākamo soli.
7. solis
Tagad mēs pagriežamies, lai pagrieztu ievietotos fotoattēlus. Šim nolūkam mums ir nepieciešams pārveidošanas stils. Pašlaik tīrā veidā tas netiek izmantots, bet tikai ar prefiksu katram pārlūkam sākumā, piemēram:
-webkit-transformēt: pagriezt (vērtība);
-moz-pārveidot: pagriezt (vērtība);
-o-pārveidot: pagriezt (vērtība);
Šis ir pārlūkprogrammu rotācijas stils: attiecīgi Google Chrome, Mazilla, Opera. Vārda "vērtība" vietā mēs ievietosim skaitli ar deg beigām šādi:
90 grādi - pagrieziet par 90 grādiem pulksteņrādītāja virzienā.
-5deg - pagrieziet -5 grādus pretēji pulksteņrādītāja virzienam.
Utt
8. solis
Fotoattēla_1 stils:
# foto_1 {
-webkit-transformēt: pagriezt (5deg);
-moz-pārveidot: pagriezt (5deg);
-o-pārveidot: pagriezt (5deg);
}
Pirmais attēls tiek pagriezts par 5 grādiem.
9. solis
Fotoattēla_2 stils:
# foto_2 {
-webkit-transformēt: pagriezt (-3deg);
-moz-pārveidot: pagriezt (-3deg);
-o-pārveidot: pagriezt (-3deg);
}
Otrais attēls ir pagriezts par -3 grādiem.
10. solis
Foto stils_3:
# photo_3 {
-webkit-transformēt: pagriezt (-2deg);
-moz-pārveidot: pagriezt (-2deg);
-o-pārveidot: pagriezt (-2deg);
}
Trešais attēls ir pagriezts par -2 grādiem.
11. solis
Fotoattēla_4 stils:
# photo_4 {
-webkit-transformēt: pagriezt (8deg);
-moz-pārveidot: pagriezt (8deg);
-o-pārveidot: pagriezt (8deg);
}
Ceturtais attēls ir pagriezts par 8 grādiem.
12. solis
Apskatīsim, kā jūs varat labot attēlu pozīciju. Piemēram, jūs vēlaties kompensēt pirmo attēlu 20 pikseļus no augšas un 10 pikseļus no kreisās puses. Šajā gadījumā jums jāizmanto piemales stils. Šeit ir pareizs veids, kā to izmantot mūsu gadījumam:
# foto_1 {
piemale: 20px -10px -20px 10px;
-webkit-transformēt: pagriezt (5deg);
-moz-pārveidot: pagriezt (5deg);
-o-pārveidot: pagriezt (5deg);
}
Lūdzu, ņemiet vērā, ka pirmā stila vērtība ir augšējā mala; otrais ir ievilkums pa labi; trešais ir atkāpe no apakšas; ceturtais - kreisais ievilkums.
Svarīgi: mūsu gadījumā apakšējā starpība ir vienāda ar augšējās robežas negatīvo vērtību. Ja zem lapas attēla redzat atstarpi, mēģiniet vēl negatīvāk ievilkt attēla apakšdaļu.
13. solis
Darbs ir pabeigts, es sniedzu ekrānuzņēmumu (ņemot vērā izmaiņas 12. attēla aprakstītā pirmā attēla ievilkumā).
Pievienojiet ievilkuma stilu visiem attēliem, kas nav piemēroti jums.
