首頁 > 文章 > web前端 > 如何將元素錨定到響應式影像的正確位置？

如何將元素錨定到響應式影像的正確位置？

PHPz轉載: 2023-09-22 18:09:061053瀏覽

如何將元素錨定到響應式影像的正確位置？

近來，將錨點放置在響應式影像上的正確位置變得更加重要。因為我們在日常生活中會遇到很多廣告，如果錨點沒有正確放置在響應式圖像下方，將會使用戶更難以理解該網頁。

我們使用 CSS 和 HTML 將元素錨定到回應圖片上的正確位置。在我們深入本文以更好地理解之前，讓我們快速瀏覽一下 HTML 中的錨點和圖像標籤。

HTML 中的錨標記

透過其 href 屬性，HTML 元素（或錨元素）產生指向網頁、文件、電子郵件地址、同一頁面上的位置或可以透過 URL 尋址的任何其他內容的超連結。

每個應包含描述連結最終目的地的文字。當焦點位於元素時，按 Enter 鍵將啟動 href 屬性（如果存在）。

文法

以下是 HTML 中錨標記的語法

<a href = "link"> Link Name </a>

HTML 標籤

要在網頁或網站中插入圖像，請使用 HTML 如何將元素錨定到響應式影像的正確位置？標記。在現代網站中，圖像使用元素連結到網頁，該元素包含圖像的空間。這可以防止網站直接向網頁添加圖像。

文法

以下是img標籤的語法

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

要了解有關將元素錨定到響應式圖像上正確位置的更多信息，請查看以下範例

範例

在下面，我們使用 CSS 將元素錨定到回應圖片上的正確位置。

<!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="如何將元素錨定到響應式影像的正確位置？" >
            <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="如何將元素錨定到響應式影像的正確位置？" >
            <a href="https://www.tutorialspoint.com/html/index.htm">HTML Tutorial</a>
         </div>
      </div>
   </body>
</html>

執行腳本時，它將產生一個輸出，其中包含上傳到網頁上的圖像以及附加在回應圖像底部的相應超連結。

範例

考慮以下範例，我們將元素的錨點放置在響應式影像上的正確位置。

<!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="如何將元素錨定到響應式影像的正確位置？" >
         </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>

執行上述腳本時，將彈出輸出窗口，顯示網頁上傳的圖像以及附加在圖像兩側的超鏈接，並在超鏈接中應用了 CSS。

以上是如何將元素錨定到響應式影像的正確位置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html href

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何在JavaScript中搜尋連結的目標屬性的值？下一篇：如何在JavaScript中搜尋連結的目標屬性的值？

看更多