如何使用html和css创建一个小的颜色框?

前端之家收集整理的这篇文章主要介绍了如何使用html和css创建一个小的颜色框?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在html文件/网站上有一张照片,我想添加图片的可用颜色列表.我想要创建非常小的盒子或点,每个颜色都有一个小盒子.

我该怎么做?

谢谢!

解决方法

例如,您可以使用CSS的浮动功能轻松创建这些.
我在Jsfiddle over here上创建了一个小例子,所有相关的css和html也在那里提供.
.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(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>

猜你在找的HTML相关文章