gpt4 book ai didi

样式 需要 Css 帮助

转载 作者:太空宇宙 更新时间:2023-11-03 19:32:19 24 4
gpt4 key购买 nike

这是我坚持使用的代码,我无法更改或改变它

<p>
<span class="small">
<img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
<img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
<img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
<img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
<img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
</span>
<em></em>
</p>

如何为每个单独的 star.gif 设置样式,以便为每个 gif 分配不同的位置。

我在考虑 span:first-child 路线,但我的 CSS 技能有限。

最佳答案

有多种方法可以实现这一点。考虑到您写道您不能更改任何现有的 html,最好的方法是使用子选择器。在示例中,我使用了固定定位,但如果您愿意,也可以使用相对定位。下面的示例代码,在 CSS 中,我们将 nth-child(1) 分配给每个图像(数字选择它将控制哪个 child )。

<html>
<head>
<style type="text/css">
.small img:nth-child(1) {
position:fixed;
top:20px;
left:220px;
}
.small img:nth-child(2) {
position:fixed;
top:20px;
left:50px;
}
.small img:nth-child(3) {
position:fixed;
top:40px;
left:20px;
}
.small img:nth-child(4) {
position:fixed;
top:120px;
left:50px;
}
.small img:nth-child(5) {
position:fixed;
top:50px;
left:70px;
}
</style>
</head>
<body>
<p>
<span class="small">
<img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
<img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
<img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
<img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
<img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
</span>
<em></em>
</p>
</body>

关于样式 <span> 需要 Css 帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24296468/

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