如何制作适当的页脚，以便在放大网页时，元素将相应地移动

我正在为我们的项目制作页脚。如何使当我放大网页时，"在Facebook上关注我们"将出现在页脚信息的顶部？对于您可能会在我的代码中发现的一些错误，我深表歉意。建议和更正将不胜感激。

   <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
                <title> Pamana Beach Resort </title>
          <link rel="icon" type="image/png" href="icon.png">
          <style>
          div#fixedfooter {
            position:fixed;
            bottom:0px;
            left: 0px;
            width:100%;
            height: 70px;
            background:#00ADEF;
          }
          #footer-info {
            background-color: #00adef;
            width: 50%;
            margin-left: 50px;
            margin-top: 10px;
            float: left;
          }
          #footer-infotext {
            color: #FFFFFF;
            font-family: footer-info;
            font-size: 90%;
            text-align: center;
            float: left;
          }
          #social {
            margin-top: 10px;
            margin-right: 30px;
            background-color: #00adef;
            float: right;
            widht: 400px;
          }
          #sociallogo {
            width: 50px;
            height: 50px;
          }
          #socialtext {
            float:left;
            font-family: footer-info;
            padding-right: 10px;
            color: #FFFFFF;
          }

          @font-face {
              font-family: footer-info;
              src: url(GOTHIC.ttf);
          }
          @font-face {
              font-family: footer-infoBold;
              src: url(GOTHICB.ttf);
          }
          #bold-info {
            font-family: footer-infoBold;
            font-size: 100%;
          }
        </style>
      </head>
      <footer>
        <div id="fixedfooter" >
          <div id="footer-info">
              <p id="footer-infotext">Designed by <span id="bold-info">CMSC 2 Students | Pamana Beach Resort </span> © Copyright 2016, All Rights Reserved.</p>
          </div>
          <div id="social">
              <p id="socialtext">FOLLOW US ON FACEBOOK</p>
              <img id="sociallogo" src="social.png">
      </body>
    </html>

要点：

关闭您的标签！您没有关闭页脚和一些div 元素。
把"social"-div放在第一位，这样当视图变得时它会在顶部较小。
从 id "固定页脚" 中删除"高度"属性。否则，页脚将不够大，无法显示所有信息小屏幕。
使用@media根据屏幕大小更改代码。

请查看下面的代码片段以查看所有更改。我希望它有所帮助。

* {} #fixedfooter {
  position: fixed;
  bottom: 0px;
  background: #00ADEF;
  text-align: center;
}
#footer-info {
  background-color: #00adef;
  width: 30%;
  margin-top: 10px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
#footer-infotext {
  color: #FFFFFF;
  font-family: footer-info;
  font-size: 90%;
  text-align: center;
  float: left;
}
#social {
  margin-top: 10px;
  background-color: #00adef;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}
#sociallogo {
  width: 50px;
  height: 50px;
}
#socialtext {
  float: left;
  font-family: footer-info;
  padding-right: 10px;
  color: #FFFFFF;
}
@font-face {
  font-family: footer-info;
  src: url(GOTHIC.ttf);
}
@font-face {
  font-family: footer-infoBold;
  src: url(GOTHICB.ttf);
}
#bold-info {
  font-family: footer-infoBold;
  font-size: 100%;
}
@media(min-width: 768px) {
  #footer-info {
    width: 40%;
    margin-left: 50px;
  }
  #social {
    float: right;
    margin-right: 30px;
    margin-left: 50px;
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Pamana Beach Resort</title>
  <link rel="icon" type="image/png" href="icon.png">
</head>
<body>
  <footer>
    <div id="fixedfooter">
      <div id="social">
        <p id="socialtext">FOLLOW US ON FACEBOOK</p>
      </div>
      <div id="footer-info">
        <p id="footer-infotext">Designed by <span id="bold-info">CMSC 2 Students | Pamana Beach Resort </span> © Copyright 2016, All Rights Reserved.</p>
      </div>
    </div>
  </footer>
</body>
</html>

你需要的是

把你的"在Facebook上关注我们"放在你的其他元素之上，并以高分辨率浮动它。我创造了这个小提琴来演示它。但是，您可能需要调整@media查询中的解析断点以满足您的需求。

相关内容

最新更新

热门标签：