我如何使用html和css创建一个小的颜色框？ [英] How can I create a small color box using html and css?

问题描述

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

我该怎么做？

谢谢！

解决方案

例如，您可以使用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;}   
 
 
 

I have a picture on a html file/site and I want to add the list of available colors for that picture. I want to create very small boxes or dots, a small box for every color.

How can I do this?

Thanks!

解决方案

You can create these easily using the floating ability of CSS, for example. I have created a small example on Jsfiddle over here, all the related css and html is also provided there.

.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>

这篇关于我如何使用html和css创建一个小的颜色框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！