html5&css&js代码 018颜色表
- 一、代码
- 二、效果
- 三、解释
这段代码展示了一个基本的颜色表，方便参考使用，同时也应用了各种样式应用方式。
一、代码
<!DOCTYPE html>
<html lang="zh-cn">
<head><title>编程笔记 html5&css&js 颜色表</title><meta charset="utf-8"><style>body {background-color: #2c3e50;color: #dddddd;text-align: center;}table {text-align: left;border: 1px solid #000;border-collapse: collapse;/*整体居中*/margin: 10px auto;}td {border: 1px solid #000;padding: 5px;}th {font-size: 1.5em;border: 2px solid #000;padding: 15px;}th:first-child,td:first-child {width: 16%; /* 设置第一列宽度 */}th:nth-child(2),td:nth-child(2) {width: 16%; /* 设置第二列宽度为父容器宽度的20% */}th:nth-child(3),td:nth-child(3) {width: 16%; /* 设置第二列宽度为父容器宽度的20% */}th:nth-child(4),td:nth-child(4) {width: 52%; /* 设置第二列宽度为父容器宽度的20% */}hr {width: 70%;margin: 0 auto;}</style>
</head>
<body>
<!--在这个示例中，我将每行第一个<td>元素的英文颜色名称翻译成中文，并添加了一个新的<td>元素紧随其后，放置翻译后的中文内容。-->
<h1>HTML颜色</h1>
<h2>目前所有浏览器都支持以下颜色名。</h2>
<p>141个颜色名称是在HTML和CSS颜色规范定义的(17标准颜色,再加124)。下表列出了所有颜色的值，包括十六进制值。</p>
<p>本页面可能受到浏览器的限制，所以可能无法显示所有颜色。</p>
<p>请关闭Dark Reader等改变颜色的插件，以免影响颜色的真实性。</p>
<hr>
<h2>按颜色名排序</h2><table><tr><th>英文颜色名</th><th>中文颜色名</th><th>HEX</th><th>Color</th></tr><tr><td>AliceBlue</td><td>爱丽丝蓝</td><td>#F0F8FF</td><td style="background-color: #F0F8FF"> </td></tr><tr><td>AntiqueWhite</td><td>古董白</td><td>#FAEBD7</td><td style="background-color: #FAEBD7"> </td></tr><tr><td>Aqua</td><td>水色</td><td>#00FFFF</td><td style="background-color: #00FFFF"> </td></tr><tr><td>Aquamarine</td><td>海绿色</td><td>#7FFFD4</td><td style="background-color: #7FFFD4"> </td></tr><tr><td>Azure</td><td>天蓝色</td><td>#F0FFFF</td><td style="background-color: #F0FFFF"> </td></tr><tr><td>Beige</td><td>米色</td><td>#F5F5DC</td><td style="background-color: #F5F5DC"> </td></tr><tr><td>Bisque</td><td>深陶瓦色</td><td>#FFE4C4</td><td style="background-color: #FFE4C4"> </td></tr><tr><td>Black</td><td>黑色</td><td>#000000</td><td style="background-color: #000000"> </td></tr><tr><td>BlanchedAlmond</td><td>熟杏仁色</td><td>#FFEBCD</td><td style="background-color: #FFEBCD"> </td></tr><tr><td>Blue</td><td>蓝色</td><td>#0000FF</td><td style="background-color: #0000FF"> </td></tr><tr><td>BlueViolet</td><td>蓝紫色</td><td>#8A2BE2</td><td style="background-color: #8A2BE2"> </td></tr><tr><td>Cornsilk</td><td>米黄石色</td><td>#FFF8DC</td><td style="background-color: #FFF8DC"> </td></tr><tr><td>Crimson</td><td>深红色</td><td>#DC143C</td><td style="background-color: #DC143C"> </td></tr><tr><td>Cyan</td><td>青色</td><td>#00FFFF</td><td style="background-color: #00FFFF"> </td></tr><tr><td>DarkBlue</td><td>深蓝色</td><td>#00008B</td><td style="background-color: #00008B"> </td></tr><tr><td>DarkCyan</td><td>深青色</td><td>#008B8B</td><td style="background-color: #008B8B"> </td></tr><tr><td>DarkGoldenRod</td><td>深金棕色</td><td>#B8860B</td><td style="background-color: #B8860B"> </td></tr><tr><td>DarkGray</td><td>深灰色</td><td>#A9A9A9</td><td style="background-color: #A9A9A9"> </td></tr><tr><td>DarkGreen</td><td>深绿色</td><td>#006400</td><td style="background-color: #006400"> </td></tr><tr><td>DarkKhaki</td><td>深卡其布色</td><td>#BDB76B</td><td style="background-color: #BDB76B"> </td></tr><tr><td>DarkMagenta</td><td>深洋红色</td><td>#8B008B</td><td style="background-color: #8B008B"> </td></tr><tr><td>DarkOliveGreen</td><td>深橄榄绿色</td><td>#556B2F</td><td style="background-color: #556B2F"> </td></tr><tr><td>DarkOrange</td><td>深橙色</td><td>#FF8C00</td><td style="background-color: #FF8C00"> </td></tr><tr><td>DarkOrchid</td><td>深兰花紫</td><td>#9932CC</td><td style="background-color: #9932CC"> </td></tr><tr><td>DarkRed</td><td>深红色</td><td>#8B0000</td><td style="background-color: #8B0000"> </td></tr><tr><td>DarkSalmon</td><td>深鲑鱼色</td><td>#E9967A</td><td style="background-color: #E9967A"> </td></tr><tr><td>DarkSeaGreen</td><td>深海绿色</td><td>#8FBC8F</td><td style="background-color: #8FBC8F"> </td></tr><tr><td>DarkSlateBlue</td><td>深岩蓝色</td><td>#483D8B</td><td style="background-color: #483D8B"> </td></tr><tr><td>DarkSlateGray</td><td>深石板灰</td><td>#2F4F4F</td><td style="background-color: #2F4F4F"> </td></tr><tr><td>DarkTurquoise</td><td>深绿松石色</td><td>#00CED1</td><td style="background-color: #00CED1"> </td></tr><tr><td>DarkViolet</td><td>深紫罗兰色</td><td>#9400D3</td><td style="background-color: #9400D3"> </td></tr><tr><td>DeepPink</td><td>深粉红色</td><td>#FF1493</td><td style="background-color: #FF1493"> </td></tr><tr><td>DeepSkyBlue</td><td>深天蓝色</td><td>#00BFFF</td><td style="background-color: #00BFFF"> </td></tr><tr><td>DimGray</td><td>暗灰色</td><td>#696969</td><td style="background-color: #696969"> </td></tr><tr><td>DodgerBlue</td><td>道奇蓝</td><td>#1E90FF</td><td style="background-color: #1E90FF"> </td></tr><tr><td>FireBrick</td><td>砖红色</td><td>#B22222</td><td style="background-color: #B22222"> </td></tr><tr><td>FloralWhite</td><td>花白色</td><td>#FFFAF0</td><td style="background-color: #FFFAF0"> </td></tr><tr><td>ForestGreen</td><td>森林绿</td><td>#228B22</td><td style="background-color: #228B22"> </td></tr><tr><td>Fuchsia</td><td>紫红色</td><td>#FF00FF</td><td style="background-color: #FF00FF"> </td></tr><tr><td>Gainsboro</td><td>苍白灰</td><td>#DCDCDC</td><td style="background-color: #DCDCDC"> </td></tr><tr><td>GhostWhite</td><td>幽灵白</td><td>#F8F8FF</td><td style="background-color: #F8F8FF"> </td></tr><tr><td>Gold</td><td>金色</td><td>#FFD700</td><td style="background-color: #FFD700"> </td></tr><tr><td>GoldenRod</td><td>金菊色</td><td>#DAA520</td><td style="background-color: #DAA520"> </td></tr><tr><td>Gray</td><td>灰色</td><td>#808080</td><td style="background-color: #808080"> </td></tr><tr><td>Green</td><td>绿色</td><td>#008000</td><td style="background-color: #008000"> </td></tr><tr><td>GreenYellow</td><td>黄绿色</td><td>#ADFF2F</td><td style="background-color: #ADFF2F"> </td></tr><tr><td>HoneyDew</td><td>蜂蜜露</td><td>#F0FFF0</td><td style="background-color: #F0FFF0"> </td></tr><tr><td>HotPink</td><td>热粉色</td><td>#FF69B4</td><td style="background-color: #FF69B4"> </td></tr><tr><td>IndianRed</td><td>印度红</td><td>#CD5C5C</td><td style="background-color: #CD5C5C"> </td></tr><tr><td>Indigo</td><td>靛蓝色</td><td>#4B0082</td><td style="background-color: #4B0082"> </td></tr><tr><td>Ivory</td><td>象牙白</td><td>#FFFFF0</td><td style="background-color: #FFFFF0"> </td></tr><tr><td>Khaki</td><td>卡其色</td><td>#F0E68C</td><td style="background-color: #F0E68C"> </td></tr><tr><td>Lavender</td><td>薰衣草紫</td><td>#E6E6FA</td><td style="background-color: #E6E6FA"> </td></tr><tr><td>LavenderBlush</td><td>薰衣草红晕</td><td>#FFF0F5</td><td style="background-color: #FFF0F5"> </td></tr><tr><td>LawnGreen</td><td>草地绿</td><td>#7CFC00</td><td style="background-color: #7CFC00"> </td></tr><tr><td>LemonChiffon</td><td>柠檬绸色</td><td>#FFFACD</td><td style="background-color: #FFFACD"> </td></tr><tr><td>LightBlue</td><td>浅蓝色</td><td>#ADD8E6</td><td style="background-color: #ADD8E6"> </td></tr><tr><td>LightCoral</td><td>浅珊瑚色</td><td>#F08080</td><td style="background-color: #F08080"> </td></tr><tr><td>LightCyan</td><td>浅青色</td><td>#E0FFFF</td><td style="background-color: #E0FFFF"> </td></tr><tr><td>LightGoldenRodYellow</td><td>浅金菊黄色</td><td>#FAFAD2</td><td style="background-color: #FAFAD2"> </td></tr><tr><td>LightGray</td><td>浅灰色</td><td>#D3D3D3</td><td style="background-color: #D3D3D3"> </td></tr><tr><td>LightGreen</td><td>浅绿色</td><td>#90EE90</td><td style="background-color: #90EE90"> </td></tr><tr><td>LightPink</td><td>浅粉色</td><td>#FFB6C1</td><td style="background-color: #FFB6C1"> </td></tr><tr><td>LightSalmon</td><td>浅鲑鱼色</td><td>#FFA07A</td><td style="background-color: #FFA07A"> </td></tr><tr><td>LightSeaGreen</td><td>浅海绿色</td><td>#20B2AA</td><td style="background-color: #20B2AA"> </td></tr><tr><td>LightSkyBlue</td><td>浅天蓝色</td><td>#87CEFA</td><td style="background-color: #87CEFA"> </td></tr><tr><td>LightSlateGray</td><td>浅石板灰</td><td>#778899</td><td style="background-color: #778899"> </td></tr><tr><td>LightSteelBlue</td><td>浅钢青色</td><td>#B0C4DE</td><td style="background-color: #B0C4DE"> </td></tr><tr><td>LightYellow</td><td>浅黄色</td><td>#FFFFE0</td><td style="background-color: #FFFFE0"> </td></tr><tr><td>Lime</td><td>酸橙绿</td><td>#00FF00</td><td style="background-color: #00FF00"> </td></tr><tr><td>LimeGreen</td><td>柠檬绿</td><td>#32CD32</td><td style="background-color: #32CD32"> </td></tr><tr><td>Linen</td><td>亚麻色</td><td>#FAF0E6</td><td style="background-color: #FAF0E6"> </td></tr><tr><td>Magenta</td><td>品红色</td><td>#FF00FF</td><td style="background-color: #FF00FF"> </td></tr><tr><td>Maroon</td><td>栗色</td><td>#800000</td><td style="background-color: #800000"> </td></tr><tr><td>MediumAquaMarine</td><td>中度海蓝宝石色</td><td>#66CDAA</td><td style="background-color: #66CDAA"> </td></tr><tr><td>MediumBlue</td><td>中度蓝色</td><td>#0000CD</td><td style="background-color: #0000CD"> </td></tr><tr><td>MediumOrchid</td><td>中度兰花紫</td><td>#BA55D3</td><td style="background-color: #BA55D3"> </td></tr><tr><td>MediumPurple</td><td>中度紫色</td><td>#9370DB</td><td style="background-color: #9370DB"> </td></tr><tr><td>MediumSeaGreen</td><td>中度海洋绿</td><td>#3CB371</td><td style="background-color: #3CB371"> </td></tr><tr><td>MediumSlateBlue</td><td>中度板岩蓝</td><td>#7B68EE</td><td style="background-color: #7B68EE"> </td></tr><tr><td>MediumSpringGreen</td><td>中度春绿色</td><td>#00FA9A</td><td style="background-color: #00FA9A"> </td></tr><tr><td>MediumTurquoise</td><td>中度绿松石色</td><td>#48D1CC</td><td style="background-color: #48D1CC"> </td></tr><tr><td>MediumVioletRed</td><td>中度紫罗兰红色</td><td>#C71585</td><td style="background-color: #C71585"> </td></tr><tr><td>MidnightBlue</td><td>子夜蓝</td><td>#191970</td><td style="background-color: #191970"> </td></tr><tr><td>MintCream</td><td>薄荷奶油色</td><td>#F5FFFA</td><td style="background-color: #F5FFFA"> </td></tr><tr><td>MistyRose</td><td>雾玫瑰色</td><td>#FFE4E1</td><td style="background-color: #FFE4E1"> </td></tr><tr><td>Moccasin</td><td>鹿皮鞋色</td><td>#FFE4B5</td><td style="background-color: #FFE4B5"> </td></tr><tr><td>NavajoWhite</td><td>纳瓦霍白</td><td>#FFDEAD</td><td style="background-color: #FFDEAD"> </td></tr><tr><td>Navy</td><td>海军蓝</td><td>#000080</td><td style="background-color: #000080"> </td></tr><tr><td>OldLace</td><td>老式花边白</td><td>#FDF5E6</td><td style="background-color: #FDF5E6"> </td></tr><tr><td>Olive</td><td>橄榄色</td><td>#808000</td><td style="background-color: #808000"> </td></tr><tr><td>OliveDrab</td><td>橄榄褐</td><td>#6B8E23</td><td style="background-color: #6B8E23"> </td></tr><tr><td>Orange</td><td>橙色</td><td>#FFA500</td><td style="background-color: #FFA500"> </td></tr><tr><td>OrangeRed</td><td>橙红色</td><td>#FF4500</td><td style="background-color: #FF4500"> </td></tr><tr><td>Orchid</td><td>兰花紫</td><td>#DA70D6</td><td style="background-color: #DA70D6"> </td></tr><tr><td>PaleGoldenRod</td><td>苍白金菊色</td><td>#EEE8AA</td><td style="background-color: #EEE8AA"> </td></tr><tr><td>PaleGreen</td><td>苍白绿色</td><td>#98FB98</td><td style="background-color: #98FB98"> </td></tr><tr><td>PaleTurquoise</td><td>苍白绿松石色</td><td>#AFEEEE</td><td style="background-color: #AFEEEE"> </td></tr><tr><td>PaleVioletRed</td><td>苍白紫罗兰红色</td><td>#DB7093</td><td style="background-color: #DB7093"> </td></tr><tr><td>PapayaWhip</td><td>木瓜奶油色</td><td>#FFEFD5</td><td style="background-color: #FFEFD5"> </td></tr><tr><td>PeachPuff</td><td>桃皮色</td><td>#FFDAB9</td><td style="background-color: #FFDAB9"> </td></tr><tr><td>Peru</td><td>秘鲁色</td><td>#CD853F</td><td style="background-color: #CD853F"> </td></tr><tr><td>Pink</td><td>粉红色</td><td>#FFC0CB</td><td style="background-color: #FFC0CB"> </td></tr><tr><td>Plum</td><td>李紫色</td><td>#DDA0DD</td><td style="background-color: #DDA0DD"> </td></tr><tr><td>PowderBlue</td><td>雪青蓝</td><td>#B0E0E6</td><td style="background-color: #B0E0E6"> </td></tr><tr><td>Purple</td><td>紫色</td><td>#800080</td><td style="background-color: #800080"> </td></tr><tr><td>Red</td><td>红色</td><td>#FF0000</td><td style="background-color: #FF0000"> </td></tr><tr><td>RosyBrown</td><td>玫瑰棕色</td><td>#BC8F8F</td><td style="background-color: #BC8F8F"> </td></tr><tr><td>RoyalBlue</td><td>宝蓝色</td><td>#4169E1</td><td style="background-color: #4169E1"> </td></tr><tr><td>SaddleBrown</td><td>马鞍棕色</td><td>#8B4513</td><td style="background-color: #8B4513"> </td></tr><tr><td>Salmon</td><td>鲑鱼色</td><td>#FA8072</td><td style="background-color: #FA8072"> </td></tr><tr><td>SandyBrown</td><td>沙褐色</td><td>#F4A460</td><td style="background-color: #F4A460"> </td></tr><tr><td>SeaGreen</td><td>海洋绿色</td><td>#2E8B57</td><td style="background-color: #2E8B57"> </td></tr><tr><td>SeaShell</td><td>海贝壳色</td><td>#FFF5EE</td><td style="background-color: #FFF5EE"> </td></tr><tr><td>Sienna</td><td>赭石色</td><td>#A0522D</td><td style="background-color: #A0522D"> </td></tr><tr><td>Silver</td><td>银白色</td><td>#C0C0C0</td><td style="background-color: #C0C0C0"> </td></tr><tr><td>SkyBlue</td><td>天蓝色</td><td>#87CEEB</td><td style="background-color: #87CEEB"> </td></tr><tr><td>SlateBlue</td><td>石板蓝</td><td>#6A5ACD</td><td style="background-color: #6A5ACD"> </td></tr><tr><td>SlateGray</td><td>石板灰色</td><td>#708090</td><td style="background-color: #708090"> </td></tr><tr><td>Snow</td><td>雪白色</td><td>#FFFAFA</td><td style="background-color: #FFFAFA"> </td></tr><tr><td>SpringGreen</td><td>春绿色</td><td>#00FF7F</td><td style="background-color: #00FF7F"> </td></tr><tr><td>SteelBlue</td><td>钢青色</td><td>#4682B4</td><td style="background-color: #4682B4"> </td></tr><tr><td>Tan</td><td>茶色</td><td>#D2B48C</td><td style="background-color: #D2B48C"> </td></tr><tr><td>Teal</td><td>鸭绿色</td><td>#008080</td><td style="background-color: #008080"> </td></tr><tr><td>Thistle</td><td>蓟色</td><td>#D8BFD8</td><td style="background-color: #D8BFD8"> </td></tr><tr><td>Tomato</td><td>番茄红</td><td>#FF6347</td><td style="background-color: #FF6347"> </td></tr><tr><td>Turquoise</td><td>绿松石色</td><td>#40E0D0</td><td style="background-color: #40E0D0"> </td></tr><tr><td>Violet</td><td>紫罗兰色</td><td>#EE82EE</td><td style="background-color: #EE82EE"> </td></tr><tr><td>Wheat</td><td>小麦色</td><td>#F5DEB3</td><td style="background-color: #F5DEB3"> </td></tr><tr><td>White</td><td>白色</td><td>#FFFFFF</td><td style="background-color: #FFFFFF"> </td></tr><tr><td>WhiteSmoke</td><td>白烟色</td><td>#F5F5F5</td><td style="background-color: #F5F5F5"> </td></tr><tr><td>Yellow</td><td>黄色</td><td>#FFFF00</td><td style="background-color: #FFFF00"> </td></tr><tr><td>YellowGreen</td><td>黄绿色</td><td>#9ACD32</td><td style="background-color: #9ACD32"> </td></tr>
<!--background-color: #777799-->
</table>
</body>
<footer style="text-align: center;margin: 30px;font-size: 1.5rem;font-weight: bold;color: #ffcc00;">HTML+CSS+JavaScript编程配套代码 作者：明月看潮生
</footer>
</html>二、效果
三、解释
这段代码展示了一个基本的颜色表，方便参考使用。
