Google页脚颜色条CSS

Question

Google如何使颜色栏位于this page的页脚。

是否可以在CSS中进行此操作并使其扩展100％的宽度？

Answer 1

这在CSS中很容易实现。制作一个div（在这种情况下为.googlebar），宽度为100％，无论你想要多高（我选择了5px）。
然后，在内部放置4个跨距，将它们显示为内联块，将宽度设置为25％（因为其中有4个），高度设置为100％。
 剩下要做的就是改变颜色，你就完成了：

.googlebar{
  width:100%;
  height:5px;
}
.googlebar span{
  display:inline-block;
  width:25%;
  height:100%;
}
.googlebar span.blue{
  background:#0089FA;
}
.googlebar span.red{
  background:#FF002B;
}
.googlebar span.orange{
  background:#FFA900;
}
.googlebar span.green{
  background:#00A753;
}

<div class="googlebar">
  <span class="blue"></span><span class="red"></span><span class="orange"></span><span class="green"></span>
</div>

Answer 2

这将为您完成：configure

HTML

<div class="footer">
  <div class="div1">

  </div>
  <div class="div2">

  </div>
  <div class="div3">

  </div>
  <div class="div4">

  </div>
</div>

CSS

.footer {
  margin-top: calc(100vh - 5px);
}

.div1 {
  width: 25%;
  height: 5px;
  background-color: blue;
  float: left;
}

.div2 {
  width: 25%;
  height: 5px;
  background-color: red;
  float: left;
}

.div3 {
  width: 25%;
  height: 5px;
  background-color: orange;
  float: left;
}

.div4 {
  width: 25%;
  height: 5px;
  background-color: green;
  float: left;
}