Tambah Caption Web Itu Tetap Dengan Imejnya

Tambah Kapsyen HTML ke Imej Web dalam 9 Langkah Mudah

Imej menambah kehidupan ke halaman web anda dan menarik perhatian penonton. Kapsyen memberikan maklumat tambahan mengenai imej web anda, tetapi mereka boleh menjadi sukar untuk ditambah ke halaman web tanpa kemahiran HTML dan CSS yang canggih. Berikut adalah cara yang boleh dipercayai untuk menambahkan kapsyen yang ringkas, namun menarik, kepada imej yang kekal dengan imej di mana sahaja anda mengalihkannya pada halaman web.

9 Langkah ke Teks Teks Keterangan

Tambah kapsyen pada imej dan gerakkannya bersama di mana sahaja anda mahu:

1. Tambah imej ke halaman web anda.
2. Dalam HTML untuk halaman web anda, letakkan tag div di sekeliling imej:
3. Tambah atribut gaya kepada tag div:
   style = "" >
4. Tetapkan lebar div ke lebar yang sama dengan imej, dengan sifat gaya lebar :
   width: width image px; ">
5. Untuk kapsyen yang sedikit lebih kecil daripada teks di sekeliling, tambahkan saiz saiz fon kepada gaya div:
   font-size: 80%; ">
6. Kapsyen kelihatan paling baik jika mereka berpusat di bawah imej, jadi tambahkan sifat jajaran teks kepada atribut gaya:
   text-align: center; "> < img src = "URL" alt = "teks alternatif" lebar = "lebar" ketinggian = "ketinggian" />
7. Akhir sekali, tambahkan sedikit ruang tambahan antara imej dan kapsyen, dengan menambahkan atribut gaya kepada imej dengan sifat gaya padding-bottom :
   style =" padding-bottom: 0.5em; " />

1. Kemudian tambahkan tajuk teks terus di bawah imej:
   Ini adalah keterangan saya

Muat naik laman web ke pelayan anda dan ujinya dalam penyemak imbas.

Petua Taip

• Lebar : Dimensi CSS boleh dalam banyak ukuran yang berbeza, jadi anda biasanya mesti memasukkan jenis pengukuran. Sebagai contoh: lebar: 100 px ; Walau bagaimanapun, dimensi imej HTML sentiasa dalam piksel, jadi anda meninggalkan pengukuran. lebar = "100"
• Jika anda membuat lebar div lebih luas daripada lebar imej, keterangan boleh muncul di sebelah imej. Jika ini adalah yang anda mahu, kemudian tambah teg> teg terus sebelum keterangan dan selepas tag imej.