Question

所以我仍然是css / html / javascript的新手，我想在我的网站底部添加这样的东西，我看到的地方看起来很有趣。

如果有人可以让我知道如何做这样的事情，或者即使有特定的名字，也会非常感激。谢谢！

Answer 1

在一个大容器中，它几乎是两个div，它们以背景颜色相互浮动。

<强> HTML

<footer>
  <div class="left">
    Right div
  </div>
  <div class="right">
    Left div
  </div>
</footer>

<强> CSS

/* Contains the footer */
footer {
  /* Height of the footer */
  height: 10em;
  width: 100%;
  color: white;
}

.left {
  height: 100%;
  /* How wide they should be */
  width: 70%;
  /* So they are next to each other */
  float: left;
  /* Background color */
  background-color: #7a7a7a;
}

.right {
  height: 100%;
  /* How high they should be */
  width: 30%;
  /* So they are next to each other */
  float: left;
  /* Background color */
  background-color: #000;
}

示例：https://jsfiddle.net/y3hzoo08/9/

Answer 2

做类似的事情就像在网站末尾的几个div一样简单。

<style>
  #footer {
    display: inline-block;
    text-align: center;
    width: 100%;
    background: #272727;
    color: white;
  }
  #box66 {
    display: inherit;
    padding: 4rem 0;
    height:100%;
    width: 66%;

  }
  #box33 {
    display: inherit;
    padding: 4rem 0;
    height:100%;
    width: 33%;
    background-color: #171717;
  }
</style>

<div id="footer">
  <div id="box66">
    <!-- 66% width div -->
    Some more content
  </div>
  <div id="box33">
    <!-- 33% width div -->
    Some more content
  </div>
</div>

https://jsfiddle.net/jb0pmphu/22/

到目前为止，并非一切都是解决方案 - 有很多方法可以实现图像的实现，但这是一种可能的解决方案。

既然你说你是新手，这里有一些我以前用过的参考文献。

https://www.w3schools.com/html/default.asp
https://www.w3schools.com/css/default.asp

页面底部的框

2 个答案: