資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在響應式圖片上將元素錨定到正確的位置？
近年來，在響應式圖片上將錨點放置在正確的位置變得越來越重要。因為我們在日常生活中會遇到很多廣告，如果錨點沒有正確放置在響應式圖片下方，使用者會更難以理解該網頁。
我們使用 CSS 和 HTML 將元素錨定到響應式圖片上的正確位置。在深入瞭解文章之前，讓我們快速瞭解一下 HTML 中的錨點和圖片標籤。
HTML 中的錨點標籤
HTML 元素 <a>（或錨點元素）透過其 href 屬性生成指向網頁、檔案、電子郵件地址、同一頁面上的位置或任何其他可以透過 URL 定位的物件的超連結。
每個 <a> 應該包含描述連結最終目標的文字。當焦點位於 <a> 元素上時，如果存在 href 屬性，則按 Enter 鍵將啟用該屬性。
語法
以下是 HTML 中錨點標籤的語法
<a href = "link"> Link Name </a>
HTML <img> 標籤
要將圖片插入網頁或網站，請使用 HTML <img> 標籤。在現代網站中，圖片是使用 <img> 元素連結到網頁的，該元素包含圖片的空間。這可以防止網站直接將圖片新增到網頁中。
語法
以下是 img 標籤的語法
<img src="" alt="" width="" 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://tutorialspoint.tw/java/images/java-mini-logo.jpg">
<a href="https://tutorialspoint.tw/java/index.htm">Java Tutorial</a>
</div>
<div class="type">
<img src="https://tutorialspoint.tw/html/images/html-mini-logo.jpg">
<a href="https://tutorialspoint.tw/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">
</div>
<a href="https://tutorialspoint.tw/html/index.htm" class="link1">HTML</a>
<a href="https://tutorialspoint.tw/java/index.htm" class="link2">JAVA</a>
</div>
</body>
</html>
執行上述指令碼後，輸出視窗將彈出，顯示上傳到網頁上的圖片以及附加在圖片兩側的超連結，並將 CSS 應用於超連結。
更新時間： 2023年4月20日
967 次檢視
廣告