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

Question

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

我怎样才能做到这一点？

谢谢!

Answer 1

例如,您可以使用CSS的浮动功能轻松创建这些.我在这里创建了一个关于Jsfiddle的小例子,那里也提供了所有相关的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

如果你想创建一个小点，只需使用 font Awesome 中的图标即可。

fa fa-circle