Rumah > Artikel > hujung hadapan web > Bagaimana untuk menambat elemen ke kedudukan yang betul dalam imej responsif?
Meletakkan sauh di lokasi yang betul pada imej responsif telah menjadi lebih penting pada hari ini. Oleh kerana kita menemui banyak iklan dalam kehidupan seharian kita, jika sauh tidak diletakkan dengan betul di bawah imej responsif, ia akan menyukarkan pengguna untuk memahami halaman web.
Kami menggunakan CSS dan HTML untuk menambat elemen pada kedudukan yang betul pada imej responsif. Sebelum kita menyelami artikel ini untuk memahami dengan lebih baik, mari kita lihat sauh dan teg imej dalam HTML.
Melalui atribut hrefnya, elemen HTML (atau elemen utama) menjana hiperpautan ke halaman web, fail, alamat e-mel, lokasi pada halaman yang sama atau mana-mana kandungan lain yang boleh ditangani oleh URL.
Setiap hendaklah mengandungi teks yang menerangkan destinasi akhir pautan. Apabila fokus pada elemen menekan Enter mengaktifkan atribut href jika ia wujud.
Berikut ialah sintaks tag anchor dalam HTML
<a href = "link"> Link Name </a>
Tatabahasa
<img src="" alt="" style="max-width:90%" height="">Untuk mengetahui lebih lanjut tentang menambat elemen ke lokasi yang betul pada imej responsif, lihat contoh di bawah
Contoh
<!DOCTYPE html> <html> <body> <style> .tutorial { display: flex; width: 60%; margin: auto; } .type { text-align: center; } .tutorial img { max-width: 90%; display: block; } </style> <div class="tutorial"> <div class="type"> <img src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg" alt="Bagaimana untuk menambat elemen ke kedudukan yang betul dalam imej responsif?" > <a href="https://www.tutorialspoint.com/java/index.htm">Java Tutorial</a> </div> <div class="type"> <img src="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg" alt="Bagaimana untuk menambat elemen ke kedudukan yang betul dalam imej responsif?" > <a href="https://www.tutorialspoint.com/html/index.htm">HTML Tutorial</a> </div> </div> </body> </html>Apabila skrip dilaksanakan, ia akan menghasilkan output yang mengandungi imej yang dimuat naik ke halaman web dan hiperpautan yang sepadan dilampirkan pada bahagian bawah imej respons.
Contoh
<!DOCTYPE html> <html> <body> <style> #tutorial{ float:left; position: relative; } #tutorial img { max-width: 100%; display: inline-block; } a.link1{ height:15%; width:15%; position: absolute; top:60%; left:10%; display:block; background:#00FF00 ; } a.link2{ height:15%; width:15%; position: absolute; top:50%; left:76%; display: block; background:#FF0000; } </style> <div id="tutorial"> <div> <img src="https://www.math-english.com/media/dices/two-dices2.png" alt="Bagaimana untuk menambat elemen ke kedudukan yang betul dalam imej responsif?" > </div> <a href="https://www.tutorialspoint.com/html/index.htm" class="link1">HTML</a> <a href="https://www.tutorialspoint.com/java/index.htm" class="link2">JAVA</a> </div> </body> </html>Apabila anda menjalankan skrip di atas, tetingkap output akan muncul menunjukkan imej yang dimuat naik pada halaman web dan hiperpautan yang dilampirkan pada kedua-dua belah imej, dengan CSS digunakan dalam hiperpautan.
Atas ialah kandungan terperinci Bagaimana untuk menambat elemen ke kedudukan yang betul dalam imej responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!