数据结构
网络
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.com/java/images/java-mini-logo.jpg">
<a href="https://tutorialspoint.com/java/index.htm">Java Tutorial</a>
</div>
<div class="type">
<img src="https://tutorialspoint.com/html/images/html-mini-logo.jpg">
<a href="https://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">
</div>
<a href="https://tutorialspoint.com/html/index.htm" class="link1">HTML</a>
<a href="https://tutorialspoint.com/java/index.htm" class="link2">JAVA</a>
</div>
</body>
</html>
运行上述脚本后，输出窗口将弹出，显示上传到网页上的图片以及附加在图片两侧的超链接，并将 CSS 应用于超链接。
更新时间： 2023年4月20日
967 次查看
广告