Bagaimana untuk menambat elemen ke kedudukan yang betul dalam imej responsif?-html tutorial-php.cn

Bagaimana untuk menambat elemen ke kedudukan yang betul dalam imej responsif?

PHPz

Lepaskan： 2023-09-22 18:09:06

ke hadapan

1035 orang telah melayarinya

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.

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>

Salin selepas log masuk

HTML

Untuk memasukkan imej ke dalam halaman web atau tapak web, gunakan teg HTML Bagaimana untuk menambat elemen ke kedudukan yang betul dalam imej responsif?

Bagaimana untuk menambat elemen ke kedudukan yang betul dalam imej responsif?

Dalam tapak web moden, imej dipautkan ke halaman web menggunakan elemen Bagaimana untuk menambat elemen ke kedudukan yang betul dalam imej responsif?

Ini menghalang tapak web daripada menambah imej terus ke halaman web.

Tatabahasa

Berikut ialah sintaks teg img

<img src="" alt=""    style="max-width:90%" height="">

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!