Kaedah yang sangat mudah untuk memutar elemen halaman laman web - hanya menerapkan beberapa gaya css. Mengenal pelajaran ini akan membolehkan anda meletakkan kipas kad yang belum dibuka, daun jatuh yang tersebar atau gambar bergaya dalam album di halaman. Pelajaran ini berisi contoh pelaksanaan album foto dan mempertimbangkan penyelesaian untuk semua penyemak imbas moden.
Ia perlu
Empat gambar seluas 450px
Arahan
Langkah 1
Contoh ini akan memberi tumpuan untuk membuat halaman album bergaya dengan foto yang diputar.
Saya menyediakan gambar terlebih dahulu (lebar 400 piksel) dengan alamat:
Pada masa akan datang, kami akan memberikan ID pada gambar mengikut namanya.
Langkah 2
Pertama, kami akan menyiapkan blok untuk album foto kami menggunakan tag div, dan juga menambahkan foto ke dalamnya menggunakan tag img (setiap gambar mesti dilampirkan dalam tag divnya sendiri), seperti ini:
Harap maklum bahawa kami telah memberikan pengecam ke blok -. Dengan pengecam, kita boleh merujuk blok menggunakan css.
Langkah 3
Seterusnya, anda perlu menetapkan gaya css ke blok. Senarai gaya: "posisi: relatif;" - akan menetapkan asal dari sudut kiri atas blok kami; "margin: 50px automatik;" - akan menetapkan lekukan blok kami "50px" di atas dan di bawah kandungan halaman yang lain, serta menetapkan lekukan automatik ke kanan dan kiri, sehingga menjajarkan blok kami di tengah; "lebar: 900 piksel; tinggi: 650 piksel;" - masing-masing akan menetapkan lebar hingga 900px dan tinggi hingga 650px
Senarai gaya yang ditentukan mesti diletakkan dengan cara ini:
#photo_page {
kedudukan: saudara;
margin: 0 automatik;
lebar: 900px;
tinggi: 650 piksel;
text-align: tengah;
}
Perhatikan penggunaan "#photo_page" - ini adalah bagaimana kita merujuk pada ID blok.
Langkah 4
Sekarang kita akan menetapkan gaya umum untuk setiap gambar di dalam blok photo_page. Ini adalah sudut bulat, sempadan kelabu, latar belakang putih, pelapisan, dan bayangan.
Ini akan mewujudkan kesan fotografi:
#photo_page img {
sempadan-jejari: 7px;
sempadan: kelabu padat 1px;
latar belakang: #ffffff;
pembalut: 10px;
kotak-bayangan: 2px 2px 10px # 697898;
}
Perhatikan penggunaan "#photo_page img" - ini akan merujuk kepada semua gambar di dalam blok photo_page
Langkah 5
Juga penting untuk menambah gaya pendek seperti ini:
#photo_page div {
terapung: kiri;
}
Ia mengecilkan semua blok di dalam blok photo_page ke kiri.
Langkah 6
Tahap pertengahan pelajaran kini telah selesai. Sekiranya karya anda serupa dengan gambar di tangkapan skrin, maka anda tidak melakukan kesalahan dan boleh meneruskan ke langkah seterusnya.
Langkah 7
Sekarang kita beralih untuk memutar foto yang disiarkan. Untuk ini kita memerlukan gaya transformasi. Pada masa ini, dalam bentuk murni, ia tidak digunakan, tetapi hanya dengan awalan untuk setiap penyemak imbas pada awalnya, seperti ini:
-webkit-transform: putar (nilai);
-moz-transform: putar (nilai);
-o-transform: putar (nilai);
Ini adalah gaya putaran untuk penyemak imbas: Google Chrome, Mazilla, Opera (masing-masing). Daripada perkataan "nilai", kami akan memasukkan nombor dengan deg pada akhir, seperti ini:
90deg - putar 90 darjah mengikut arah jam.
-5deg - putar -5 darjah lawan jam.
Dan lain-lain.
Langkah 8
Gaya untuk foto foto_1:
# foto_1 {
-webkit-transform: putar (5deg);
-moz-transform: putar (5deg);
-o-transform: putar (5deg);
}
Gambar pertama diputar 5 darjah.
Langkah 9
Gaya untuk foto foto_2:
# foto_2 {
-webkit-transform: putar (-3deg);
-moz-transform: putar (-3deg);
-o-transform: putar (-3deg);
}
Gambar kedua diputar -3 darjah.
Langkah 10
Gaya untuk foto foto_3:
# foto_3 {
-webkit-transform: putar (-2deg);
-moz-transform: putar (-2deg);
-o-transform: putar (-2deg);
}
Gambar ketiga diputar -2 darjah.
Langkah 11
Gaya untuk foto foto_4:
# foto_4 {
-webkit-transform: putar (8deg);
-moz-transform: putar (8deg);
-o-transform: putar (8deg);
}
Gambar keempat diputar 8 darjah.
Langkah 12
Mari lihat bagaimana anda boleh membetulkan kedudukan gambar. Contohnya, anda mahu mengimbangi gambar pertama 20 piksel dari atas dan 10 piksel dari kiri. Dalam kes ini, anda perlu menggunakan gaya margin. Inilah cara yang betul untuk menggunakannya untuk kes kami:
# foto_1 {
margin: 20px -10px -20px 10px;
-webkit-transform: putar (5deg);
-moz-transform: putar (5deg);
-o-transform: putar (5deg);
}
Harap maklum bahawa nilai pertama gaya adalah margin atas; yang kedua ialah lekukan ke kanan; yang ketiga adalah lekukan dari bawah; keempat - inden kiri.
Penting: dalam kes kami, margin bawah sama dengan nilai negatif margin atas. Sekiranya anda melihat ruang putih di bawah gambar di halaman anda, cubalah lekukan bahagian bawah gambar lebih negatif.
Langkah 13
Kerja selesai, saya menyediakan tangkapan skrin (dengan mengambil kira perubahan lekukan gambar pertama yang dijelaskan dalam Langkah 12).
Tambahkan gaya lekukan pada gambar yang tidak sesuai dengan anda.
