gpt4 book ai didi

html - 图片链接区域延伸到图片之外

转载 作者:行者123 更新时间:2023-11-28 00:04:07 25 4
gpt4 key购买 nike

我正在设计一个简单的 HTML 网站。我遇到的问题是我用作链接的图像。我将它们放置在我想要的位置,但后来我注意到链接区域延伸到了图像的左侧。我正在使用相对定位,并认为这可能与它有关,但我从我的网站上删除了所有 CSS,但它仍然发生。我有一个严格的 HTML 页面,链接区域仍然超出图像大小。

知道是什么原因造成的吗?

谢谢

<!DOCTYPE html>
<html>

<head>
<title>Zach's Website</title>
<link rel="stylesheet" type="text/css" href="css/grid.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<!--<link rel="stylesheet" type="text/css" href="css/style.css">-->
<link rel="stylesheet" type="text/css" href="css/screen.css" media="screen/projection">
<link rel="stylesheet" type="text/css" href="css/print.css" media="print">
<!--[if IE]>
<link rel="stylesheet" href="blueprint/ie.css" type="text/css"
media="screen, projection">
<![endif]-->




<div id="header">
<div class="container clearfix">
<img id="headbanner" class="span-24" src="img/headerbanner.png">

<a id="headerLogo" href="index.html"><img class="prepend-3" src="img/ZBLogoHeader.png"></a>
<ul class="navigation">
<li><a href="#">Experience</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="social">
<li><a href="http://www.twitter.com/zachburns12" target="_blank"><img src="img/twitter.png"></a></li>
<li><a href="https://www.facebook.com/zach.burns1" target="_blank"><img src="img/facebook.png"></a></li>
<li><a href="http://www.anovelidea12.tumblr.com/" target="_blank"><img src="img/tumblr.png"></a></li>
<li><a href="http://www.linkedin.com/pub/zach-burns/39/538/335/" target="_blank"><img src="img/linkedin.png"></a></li>
<li><a href="http://www.github.com/zburns12" target="_blank"><img src="img/github.png"></a></li>
</ul>

<img id="bodyPattern" src="img/body.png">
</div>
</div>

</head>

<body>

<div id="project1" class="container clearfix">

<a href="#"><img id="novel" class="prepend-2" src="img/ANovelIdea.jpg" onmouseover="this.src='img/hoverNovel.png'" onmouseout="this.src='img/ANovelIdea.jpg'" /></a>

<a href="#"><img id="barminder" class="prepend-8" src="img/Barminder.jpg" onmouseover="this.src='img/hoverBar.png'" onmouseout="this.src='img/Barminder.jpg'" /></a>


</div>

</body>
<footer>
<div class="container clearfix">
<img id="footerLogo" src="img/ZBLogoFooter.png">
<img id="footerBanner" src="img/footerbanner.png">
</div>
</footer>
</html>

最佳答案

您是否为“a”标签设置了高度/宽度?理想情况下,您应该设置高度、宽度和显示: block ,以便“a”标签具有准确的大小。一个{
显示: block ;
高度:100px;
宽度:100px;
}

关于html - 图片链接区域延伸到图片之外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19549334/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com