如何將元素錨定到響應式影像的正確位置？-html教學-PHP中文網

HTML 中的錨標記

文法

標籤" >HTML

標籤

範例

首頁

web前端

html教學

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

PHPz

Sep 22, 2023 pm 06:09 PM

響應式設計（responsive design）元素定位（element positioning）影像適配（image adaptation）

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

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

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

HTML 中的錨標記

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

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

文法

以下是 HTML 中錨標記的語法

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

登入後複製

HTML 標籤

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

文法

以下是img標籤的語法

<img src="/static/imghw/default1.png"  data-src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg"  class="lazy" 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="/static/imghw/default1.png"  data-src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg"  class="lazy" alt="如何將元素錨定到響應式影像的正確位置？" >
            <a href="https://www.tutorialspoint.com/java/index.htm">Java Tutorial</a>
         </div>
         <div class="type">
            <img  src="/static/imghw/default1.png"  data-src="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg"  class="lazy" 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="/static/imghw/default1.png"  data-src="https://www.math-english.com/media/dices/two-dices2.png"  class="lazy" 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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn