gpt4 book ai didi

HTML 和 CSS。社交按钮如何移动它们?

转载 作者:行者123 更新时间:2023-11-28 09:38:05 24 4
gpt4 key购买 nike

嘿,我对社交按钮有疑问。我想移动它们,但只有一个显示在我的页面上,我无法移动它。我有三个按钮,它们的图像有人可以帮助我试图将它们放在标题的直线中心或我的视频上方。我想把它们放在链接上。

HTML

<body>
<div id="header">
<div id="icons>
<img src="facebook-64.png">
<img src="twitter-64.png">
<img src="instagram-64.png">
</div>
<img src="logo2.png">
<div id="nav">
<div id="nav_wrapper">

CSS

img {
position: absolute;
right: 640px;
top: -50px;
}

video {
margin-top: 250px;
}

#icons {
top: -220px;
}

black spot in header

最佳答案

如果使用绝对定位。每个按钮都需要一个不同的类。最佳做法是使用 classes 进行 css 样式设置,并为使用 JavaScript 的目标元素保留 id。图片需要包含在链接(标签)中,下面 href 中的 # 应设置为您的 facebook、twitter 和 instagram 主页的 URL。

我个人会将 html 设置为:

<body>
<div class="header">
<div class="icons>
<a class="fb-link" href"#">
<img src="facebook-64.png">
</a>
<a class="twr-link" href"#">
<img src="twitter-64.png">
</a>
<a class="inst-link" href"#">
<img src="instagram-64.png">
</a>
</div>
<img src="logo2.png">
<div id="nav">
<div id="nav_wrapper">

我不会使用绝对定位,而是简单地将链接显示为 block 并将它们向左浮动。在包含的 div 上使用边距来定位您的图标。见下文。

CSS

.icons{
margin:20px auto; //gives margin of 20px top and bottom and centers buttons horizontally.
width:220px;

}
.fb-link, .twr-link, .inst-link {
display:block;
float:left;
width:60px; //set width to the with of image used eg 64px
margin-left:20px;
}
.fb-link{
margin-left:0; //if margin left was left at 20px the icons would be 20px off center.
}

使用这些原则来布置其余页面应该是直截了当的。

关于HTML 和 CSS。社交按钮如何移动它们?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25470467/

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