gpt4 book ai didi

html - CSS - HTML 如何将 anchor 图像获取到特定的一侧

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

我想要不同 Angular 落的所有 anchor 图像,例如,左上角、右上角、右下角、右下角和中间的一个,谢谢

如何让我所有的 anchor 链接/图像都转到特定的方面 我希望团队在左上角 我希望商店右上角的赞助商在左下角和关于我们的右下角 我认为我做了所有正确的代码,但他们没有在那些特定的地方怎么样

如果有人能提供帮助,将不胜感激

CSS

.icon1.jpg {
position: absolute;
top: 0px;
left: 0px;
height: auto;
width: 50%;
}
.icon2.jpg {
position: relative;
top: 0px;
right: 0px;
height: auto;
width: 50%;
}
.icon4.jpg {
position: relative;
left: 0px;
height: auto;
width: 50%;
}
.icon3.jpg {
position: relative;
right: 0px;
height: auto;
width: 50%;
}
.DelUZens {
display: block;
margin-left: auto;
margin-right: auto;
}
body {
background: url("icon6.jpg") repeat;
}
#banner {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 175px;
z-index: -1;
}
<html>
<head>
<title>DelUZens</title>
<link href="main.css" rel="stlesheet" type="text/css">
</head>
<body bgcolor="#000">
<div z-index:1;>
<p>
<a href="teams.html" target="_blank">
<img src="icon1.jpg" style='width:50%;' border="0" alt="Null" class="top" z-index:2>
</a>
</p>
<p>
<a href="store.html" target="_blank">
<img src="icon2.jpg" style='width:50%;' border="0" alt="Null" class="right" z-index:3>

</a>
</p>
<p>
<a href="sponsors.html" target="_blank">
<img src="icon4.jpg" style='width:50%;' border="0" alt="Null" class="left" z-index:4>
</a>
</p>
<p>
<a href="aboutus.html" target="_blank">
<img src="icon3.jpg" style='width:50%;' border="0" alt="Null" class="bottom" z-index:5>
</a>
</p>
</div>
<div id="myDiv" style="position:absolute; top:230px; left:591px; right: 591px; bottom: 230px; width:0px; height:0px; z-index:8;">
<img src="icon5.png" class="DelUZens">
</div>
</body>
</html>

提前谢谢你。

最佳答案

从不亲自以这种方式布局页面,但是它会解决您当前布局的问题,请参阅fiddle https://jsfiddle.net/5pre17op/1/

注意:此 .icon1.jpg 的目标是名为 icon 的类,而 jpg 这些类中的任何一个在您的页面中都不存在,但是你确实有名为 top left rightbottom 的类,你需要像这样定位它们:

.top {
position: absolute;
top: 0px;
left: 0px;
height: auto;
width: 50%;
}

.right {
position: absolute;
top: 0px;
right: 0px;
height: auto;
width: 50%;
}

.left {
position: absolute;
left: 0px;
bottom: 0px;
height: auto;
width: 50%;
}

.bottom {
position: absolute;
right: 0px;
bottom: 0px;
height: auto;
width: 50%;
}

关于html - CSS - HTML 如何将 anchor 图像获取到特定的一侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36028736/

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