Question

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

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

Answer 1

你给所有img标签赋予相同的风格，导致它们重叠！尝试更改每个

的位置

Answer 2

如果使用绝对定位。每个按钮需要一个不同的类。最佳做法是使用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">

不是使用绝对定位，而是简单地将链接显示为块并将它们向左浮动。在包含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。社交按钮如何移动它们？

2 个答案: