CSS untuk meningkatkan presentasi gambar Anda
Untuk meningkatkan presentasi gambar Anda, Anda dapat memasukkan beberapa kode tambahan dalam CSS Anda. Mereka fleksibel tergantung pada apa yang ingin Anda capai di situs Anda.
Pelaksanaan
Masukkan kode yang diinginkan CSS dan uji di halaman Anda, seperti ini:
Beberapa contoh untuk ditempatkan dalam kode CSS
.photo {background-color: #fafbfc; perbatasan: 1px solid # b0b0b0; margin: 0 0 10px 10px; padding: 5px; } .phototoright {border: 5px solid # b0b0b0; margin: 5px 6px 15px 6px; } .phototoleft {border: 5px solid # b0b0b0; mengapung: kiri; margin: 5px 15px 6px 15 px; } Untuk membingkai gambar dengan teks ke kiri
div # photoflot p {margin: 0; bantalan: 0; text-align: justify; } div # photoflot img {float: left; warna latar: #fafbfc; perbatasan: 1px solid # b0b0b0; margin: 0 0 10px 10px; padding: 5px; } jam {clear: left; } Gunakan seperti itu:
Dapatkan turpis, iklan gratis, daftar pertanyaan, aliquet eget, ipsum. Ut nonummy libero vitae neque. Quisque lacus. Nullam lobortis. Cras quam. Tidak ada informasi yang tersedia tentang eros mollis luctus. Vivamus velit. Morbi interdum euismod sapien ...
Untuk membingkai gambar dengan teks di sebelah kanan
/ * Untuk membingkai gambar dengan teks di kanan * / .rightimg, .leftimg, .centreimg img {border: 1px solid #AAAAAA; warna latar: # E9E9E9; padding: 3px; margin: 6px; } .rightimg {float: right;} .leftimg {float: left;} div.centreimg {text-align: center; } Gunakan seperti itu:
Baca lebih lanjut dan lihat lebih lanjut tentang mollis. Sangat bagus untuk tortor luctus pretium. Lihat di bawah ini untuk informasi lebih lanjut. Tidak aktif di ipsum. Suspendisse elit. Fusce sit amet lectus. Dengan cepat dan mudah, klik untuk memperbesar. Pilih item yang Anda inginkan, pastikan Anda memilih elit. Sed a tellus. Nulla atau arcu. Lihat di sini untuk mengetahui lebih lanjut tentang ...