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

我试图在表格中显示一个彩色的矩形，并使它看起来不错，但我在HTML/CSS中很糟糕。如何让HTML颜色矩形看起来更好？

这是我（和它看起来像垃圾）：

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

这minicolor演示在输入一个很好的样本，但我似乎无法来连接近它：

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

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

来源

2016-07-13 Kieveli

你可以创建[fiddle]（https://jsfiddle.net/）吗？ –

只要你知道 - 你知道他们使用Bootstrap作为框架，是吗？ –

是的 - 我有我的项目中包含的CSS引导，但试图复制/粘贴他们的跨度，它不显示。所以我已经通过手动课来重现他们的效果。 – Kieveli

注意，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>

来源

2016-07-13 13:46:00

这是否给你一个开始？

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; 
}

来源

2016-07-13 13:45:51 Kootsj

顶层搁板！谢谢！ – Kieveli

你可以在这个页面找到许多例子：css tricks

这里，正方形和三角形的例子：

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

<h2>Just some shapes : </h2> 
 
<div class="square"></div> 
 
<div class="triangle"></div>

来源

2016-07-13 13:54:06

超酷链接！谢谢！ – Kieveli

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

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>

来源

2016-07-13 14:26:29

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

回答

相关问题