Question

我正在尝试在表格中显示一个彩色矩形并使其看起来不错，但我对HTML / CSS很糟糕。

这就是我所拥有的（它看起来像垃圾）：

<table>
  <tr>
    <td>
      #2E21FF&nbsp;&nbsp;<span style="background-color: #2E21FF;border-width=1px;border-style:solid;border-color:rgb(204,204,204);padding:0;margin:0;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </td>
  </tr>
</table>

这个微型演示在输入中有一个很好的样本，但我似乎无法接近它：

http://labs.abeautifulsite.net/jquery-minicolors/

小提琴： https://jsfiddle.net/Kieveli/9hjm9Lkf/

Answer 1

这会给你一个开始吗？

https://jsfiddle.net/9hjm9Lkf/1/

td {
  border: 1px solid #ccc;
  background-color: #efefef;
  padding: 5px 6px 5px 10px;
  border-radius: 5px;
  font-family: calibri;
  color: #777;
}

td span {
  background-color: #716bc7;
  border-left=1px solid #ccc;
  width: 20px;
  height: 100%;
  display: inline-block;
  border-radius: 5px;
}

Answer 2

请注意，td的样式与类color-box的样式不同，然后所有颜色都按其类别单独处理，使您可以重复使用代码并实现简单。

.color-box span {
  border: 1px solid rgb(204, 204, 204);
  padding: 2px;
  padding-left: 25px;
  margin: 0px;
  margin-right: 10px;
  border-radius: 3px;
}
.color-box {
  border: 1px #aaa solid;
  padding: 6px;
  padding-right: 100px;
  border-radius: 3px;
  -moz-box-shadow: inset 0 0 2px 0 #888;
  -webkit-box-shadow: inset 0 0 2px 0 #888;
  box-shadow: inset 0 0 1px 0 #888;
}
.blue-box {
  background-color: #0088cc;
}
.red-box {
  background-color: #ff6161;
}
.green-box {
  background-color: #70c24a;
}
.yellow-box {
  background-color: #e0e03e;
}

<table>
  <tr>
    <td class="color-box">
      <span class="blue-box"></span> #0088cc
    </td>
    <td class="color-box">
      <span class="yellow-box"></span> #e0e03e
    </td>
  </tr>
  <tr>
    <td class="color-box">
      <span class="green-box"></span> #70c24a
    </td>
    <td class="color-box">
      <span class="red-box"></span> #ff6161
    </td>
  </tr>
</table>

Answer 3

您可以在此页面中找到许多示例：css tricks

这里是一个带正方形和三角形的例子：

＆＃13;

datastore.save(b);
try {
    datastore.save(a);
} catch (Exception e) {
   datastore.delete(b);
}

＆＃13;

.square {
  height: 150px;
  width: 150px;
  background-color: #0074d9;
  border-radius: 80px;
  margin-bottom: 30px;
  float: left;
  margin-right: 20px;
    border-radius: 5px;
}

.triangle {
    margin-left: 4.5cm;
    height: 0px;
    width: 0px;
    border-left: 100px solid #0074d9;
    border-right: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-top: 100px solid transparent;
}

＆＃13;

Answer 4

下面是如何在表格中创建彩色矩形的示例。

 td {
              border:solid thick darkblue; border-radius: 1em; 
              border-width:3px; padding-left:9px; padding-top:6px; 
              padding-bottom:6px; margin:2px; width:980px;
    }


    <table>
      <tr>
        <td 

    <span "background":#ff0000;    
             width:200px;
             height:100px;
             display: inline-block></span>;
    </td>
      </tr>

如何使HTML颜色矩形看起来更好？

4 个答案: