Rumah >hujung hadapan web >html tutorial >Bagaimana untuk menambat elemen ke kedudukan yang betul dalam imej responsif?
Bagaimana untuk menambat elemen ke kedudukan yang betul dalam imej responsif?
- PHPzke hadapan
- 2023-09-22 18:09:061108semak imbas
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.
Tanda teg 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.
Tatabahasa
Berikut ialah sintaks tag anchor dalam HTML
<a href = "link"> Link Name </a>
HTML ![Bagaimana untuk menambat elemen ke kedudukan yang betul dalam imej responsif?]()
Untuk memasukkan imej ke dalam halaman web atau tapak web, gunakan teg HTML Tatabahasa
Berikut ialah sintaks teg img
<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
Di bawah, kami menggunakan CSS untuk menambat elemen pada kedudukan yang betul pada imej responsif.
<!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
Pertimbangkan contoh berikut di mana kita meletakkan titik penambat elemen pada lokasi yang betul pada imej responsif.
<!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!