html - 如何锁定 LI 标签中的 DIV 使其无法调整大小？

Question

我想创建一个响应式或可调整大小的背景图案，其中有六个彩色 strip 。我尝试过使用具有多种颜色的 li ，但我的问题是在调整窗口大小时无法锁定我的 li 。也就是说， strip 没有填满整个窗口尺寸。我怎样才能实现这个目标？

下面以片段的形式提供了我的代码。

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.topper {
  background-color: #ffffff;
  height: 200px;
  width: auto;
  top: 0;
  margin: 0 auto;
  padding: 0;
  display: block;
  position: relative;
  box-shadow: 3px 5px 40px 1px #000000;
  z-index: 1;
}
.bg {
  width: 100%;
  height: 100%;
  vertical-align: baseline;
  display: table-cell;
  min-width: 1366px;
  position: fixed;
  bottom: 0;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
}
ul > li {
  display: inline;
  float: left;
  bottom: 0;
  position: relative;
}
li > div {
  height: 900px;
  width: 214px;
  display: block;
}
.g {
  background-color: #4885ed;
}
.go {
  background-color: #db3236;
}
.goo {
  background-color: #f4c20d;
}
.goog {
  background-color: #4885ed;
}
.googl {
  background-color: #3cba54;
}
.google {
  background-color: #db3236;
}

<div class="topper">
</div>
<div class="bg">
  <ul>
    <li>
      <div class="g"></div>
    </li>
    <li>
      <div class="go"></div>
    </li>
    <li>
      <div class="goo"></div>
    </li>
    <li>
      <div class="goog"></div>
    </li>
    <li>
      <div class="googl"></div>
    </li>
    <li>
      <div class="google"></div>
    </li>
  </ul>
</div>

JSFiddle

Answer 1

您可以使用 linear-gradient 仅使用一个元素来完成此操作作为背景而不是使用多个 li元素。另外，正如 jiff 所指出的，您不应该使用 div里面的元素 li .

通过将元素的大小设置为等于屏幕大小并使用色标的百分比值，可以实现所需的效果。

渐变是使用以下逻辑创建的:

• 需要六个彩色条作为背景，因此每个彩色条只能占据元素背景的六分之一。也就是说，(100%/6) 约为 16.66%。

• 第一种颜色应从 0% 开始，到 16.66%(颜色停止)结束，因此应写成如下:

  <color> 0%, <color> 16.66%

  (在代码片段中，未写入 <color> 0%，因为假定第一种颜色从 0% 开始)

• 第二种颜色应从第一个元素结束的位置开始，并应进一步占据 16.66%。所以它应该从 16.66% 开始，到 33.33% 结束。这就是为什么它写成 #db3236 16.66%, #db3236 33.33% .

• 类似地，第三种颜色从第二种颜色结束的地方开始，并占据另外 16.66%。所以它的开始是 33.33%，结束是 49.99%。以同样的方式，应确定每种颜色的起点和终点，然后在 linear-gradient 中设置。 .

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.topper {
  background-color: #ffffff;
  height: 200px;
  width: auto;
  top: 0;
  margin: 0 auto;
  padding: 0;
  display: block;
  position: relative;
  box-shadow: 3px 5px 40px 1px #000000;
  z-index: 1;
}
.bg {
  width: 100%;
  height: 100%;
  position: fixed;
  bottom: 0;
  background: linear-gradient(to right, #4885ed 16.66%, #db3236 16.66%, #db3236 33.33%, #f4c20d 33.33%, #f4c20d 49.99%, #4885ed 49.99%, #4885ed 66.66%, #3cba54 66.66%, #3cba54 83.33%, #db3236 83.33%, #db3236 100%);
}

<div class="topper">
</div>

<div class="bg">
</div>