Html 如何设计<；人力资源>；有多种颜色吗？

我需要创建这样的

：

。我正在使用bootstrap，我已经在getbootstrap页面和internet上搜索了很长时间。我找不到我想要的东西，所以我希望你们中的一些人知道如何制作这个

正如我所说，它需要与引导或简单的css，少和SCS是不允许的

---

提前感谢

您可以创建一个100%宽度的容器，内部有10个跨度，每个跨度占总宽度的10%。然后在每个跨度上应用您喜欢的背景色

这样，它将是流动的，你可以很容易地将它包装在另一个容器中，使其充满宽度，而不是100%的页面

每个跨度都可以通过向每个跨度添加不同的类来确定目标，或者如果您愿意，也可以使用span:nth child（1）、span:nth child（2）等

更新

我在肖恩·洛廷的回答中并没有得到支持，因为应用于

的背景色只适用于特定版本的Chrome。例如，现在在Linux上，使用

背景色：红色，我根本看不到hr的颜色

可以肯定的是，即使在HTML5样板文件中，他们也使用此代码设计跨浏览器的样式：

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid red;
    margin: 1em 0; padding: 0; }



如果不想更改HTML元素，请使用此选项：

带有hr元素的演示



否则您可以使用另一个元素模拟hr。
这取决于你


span{显示：块；宽度：10%；浮动：左；高度：5px；}
.线路{
宽度：100%；
}
.color-1{
背景：绿色；
}
.color-2{
背景：黄色；
}
.color-3{
背景：紫色；
}
.color-4{
背景：红色；
}
.color-5{
背景：橙色；
}
.color-6{
背景：浅绿色；
}
.color-7{
背景：金；
}
.color-8{
背景：棕色；
}
.color-9{
背景：浅蓝色；
}
.color-10{
背景：浅灰色；
}
如果我是你，我会创建多个HR并为它们分配一个包装器，这样它们就可以组合在一起了。您可以为每个hr分配一个不同的id，然后使用HTML调用它们。然后，使用CSS为它们分配不同的背景色

例如：

HTML:


CSS：

#red {background-color:red;}
#blue {background-color:blue;}



您还可以在不使用外部样式表的情况下，使用HTML内联设置它们的样式。它看起来大致如下：

HTML:




我做了一些类似的事情，看看我前一段时间做的，可能与你正在看的有关。希望这有帮助
 另一个选项是用作背景：


hr{
边框：0；/*以覆盖TWBS样式表*/
高度：5px；
背景：莫兹线性梯度（左，rgba（196222138,1）0%，rgba（196222138,1）12.5%，rgba（2452532112,1）12.5%，rgba（245253212,1）25%，rgba（255208132,1）25%，rgba（255208132,1）37.5%，rgba（242122107,1）37.5%，rgba（242122107,1）50%，rgba（223157185,1）50%，rgba（223157185,1）62.5%，rgba（19215621,1）62.5%，rgba（19221621,1）75%，rgba（95156217,1）75%，rgba（95156217,1）87.5%，rgba（94190227,1）87.5%，rgba（94190227,1）87.5%，rgba（94190227,1）100%；/*FF3.6+*/
背景：-webkit线性梯度（左，rgba（196222138,1）0%，rgba（196222138,1）12.5%，rgba（2452531212,1）12.5%，rgba（2452531212,1）25%，rgba（255208132,1）25%，rgba（255208132,1）37.5%，rgba（242122107,1）37.5%，rgba（242122107,1）50%，rgba（223157185,1）50%，rgba（223157185,1）62.5%，rgba（19215621,1）62.5%，rgba（19221621,1）75%，rgba（95156217,1）75%，rgba（95156217,1）87.5%，rgba（94190227,1）87.5%，rgba（94190227,1）87.5%，rgba（94190227,1）100%；/*Chrome10+，Safari5.1+*/
背景：o型线性梯度（左，rgba（196222138,1）0%，rgba（196222138,1）12.5%，rgba（2452532112,1）12.5%，rgba（245253212,1）25%，rgba（255208132,1）25%，rgba（255208132,1）37.5%，rgba（242122107,1）37.5%，rgba（242122107,1）50%，rgba（223157185,1）50%，rgba（223157185,1）62.5%，rgba（19215621,1），rgba（19215621,1）75%，rgba（95156217,1）75%，rgba（95156217,1）87.5%，rgba（94190227,1）87.5%，rgba（94190227,1）87.5%，rgba（94190227,1）100%；/*歌剧11.10+*/
背景：-ms线性梯度（左，rgba（196222138,1）0%，rgba（196222138,1）12.5%，rgba（2452532112,1）12.5%，rgba（245253212,1）25%，rgba（255208132,1）25%，rgba（255208132,1）37.5%，rgba（242122107,1）37.5%，rgba（242122107,1）50%，rgba（223157185,1）50%，rgba（223157185,1）62.5%，rgba（19215621,1）75%，rgba（95156217,1）75%，rgba（95156217,1）87.5%，rgba（94190227,1）87.5%，rgba（94190227,1）87.5%，rgba（94190227,1）100%；/*IE10+*/
背景：线性梯度（向右，rgba（196222138,1）0%，rgba（196222138,1）12.5%，rgba（2452532112,1）12.5%，rgba（245253212,1）25%，rgba（255208132,1）25%，rgba（255208132,1）37.5%，rgba（242122107,1）37.5%，rgba（242122107,1）50%，rgba（223157185,1）50%，rgba（223157185,1）62.5%，rgba（192156221,1）62.5%，rgba（19221,1）75%，rgba（95156217,1）75%，rgba（95156217,1）87.5%，rgba（94190227,1）87.5%，rgba（94190227,1）87.5%，rgba（94190227,1）100%；/*W3C*/
}

您可以使用线性渐变设置
背景的样式。试试这个

hr {
  border: 0; 
  height: 1px;
  background: linear-gradient(to right, red, yellow, green);
}

在此处查看它的实际操作
查看它是否解决了您的问题。希望它有帮助：）它不能在所有浏览器上工作。在Ubuntu上的Chrome上，它使用您的代码以默认的灰色显示。我自己运行Chrome，它可以正常工作，您确定CSS链接或导入正确吗？我在Ubuntu上的Chrome版本41.0.2272.118（64位）上运行您的JSFIDLEUbuntu@AlexanderSolonik我相信