如何使用html和css创建一个小的彩盒？

Question

我在html文件/网站上有一张图片，我想添加该图片的可用颜色列表。我想创建非常小的盒子或点，每种颜色的小盒子。

我该怎么做？

谢谢！

Answer 1

例如，您可以使用CSS的浮动功能轻松创建这些。 我在Jsfiddle over here上创建了一个小例子，那里也提供了所有相关的css和html。

.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.blue {
  background: #13b4ff;
}

.purple {
  background: #ab3fdd;
}

.wine {
  background: #ae163e;
}

<div class="foo blue"></div>
<div class="foo purple"></div>
<div class="foo wine"></div>

Answer 2

如果你想创建一个小点，只需使用字体中的图标很棒。

fa fa-circle