首页 前端知识 html5&css&js代码 018颜色表

html5&css&js代码 018颜色表

2024-05-12 17:05:02 前端知识 前端哥 627 389 我要收藏

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">&nbsp;</td>
    </tr>
    <tr>
        <td>AntiqueWhite</td>
        <td>古董白</td>
        <td>#FAEBD7</td>
        <td style="background-color: #FAEBD7">&nbsp;</td>
    </tr>
    <tr>
        <td>Aqua</td>
        <td>水色</td>
        <td>#00FFFF</td>
        <td style="background-color: #00FFFF">&nbsp;</td>
    </tr>
    <tr>
        <td>Aquamarine</td>
        <td>海绿色</td>
        <td>#7FFFD4</td>
        <td style="background-color: #7FFFD4">&nbsp;</td>
    </tr>

    <tr>
        <td>Azure</td>
        <td>天蓝色</td>
        <td>#F0FFFF</td>
        <td style="background-color: #F0FFFF">&nbsp;</td>
    </tr>
    <tr>
        <td>Beige</td>
        <td>米色</td>
        <td>#F5F5DC</td>
        <td style="background-color: #F5F5DC">&nbsp;</td>
    </tr>
    <tr>
        <td>Bisque</td>
        <td>深陶瓦色</td>
        <td>#FFE4C4</td>
        <td style="background-color: #FFE4C4">&nbsp;</td>
    </tr>
    <tr>
        <td>Black</td>
        <td>黑色</td>
        <td>#000000</td>
        <td style="background-color: #000000">&nbsp;</td>
    </tr>
    <tr>
        <td>BlanchedAlmond</td>
        <td>熟杏仁色</td>
        <td>#FFEBCD</td>
        <td style="background-color: #FFEBCD">&nbsp;</td>
    </tr>
    <tr>
        <td>Blue</td>
        <td>蓝色</td>
        <td>#0000FF</td>
        <td style="background-color: #0000FF">&nbsp;</td>
    </tr>
    <tr>
        <td>BlueViolet</td>
        <td>蓝紫色</td>
        <td>#8A2BE2</td>
        <td style="background-color: #8A2BE2">&nbsp;</td>
    </tr>
    <tr>
        <td>Cornsilk</td>
        <td>米黄石色</td>
        <td>#FFF8DC</td>
        <td style="background-color: #FFF8DC">&nbsp;</td>
    </tr>
    <tr>
        <td>Crimson</td>
        <td>深红色</td>
        <td>#DC143C</td>
        <td style="background-color: #DC143C">&nbsp;</td>
    </tr>
    <tr>
        <td>Cyan</td>
        <td>青色</td>
        <td>#00FFFF</td>
        <td style="background-color: #00FFFF">&nbsp;</td>
    </tr>
    <tr>
        <td>DarkBlue</td>
        <td>深蓝色</td>
        <td>#00008B</td>
        <td style="background-color: #00008B">&nbsp;</td>
    </tr>
    <tr>
        <td>DarkCyan</td>
        <td>深青色</td>
        <td>#008B8B</td>
        <td style="background-color: #008B8B">&nbsp;</td>
    </tr>
    <tr>
        <td>DarkGoldenRod</td>
        <td>深金棕色</td>
        <td>#B8860B</td>
        <td style="background-color: #B8860B">&nbsp;</td>
    </tr>
    <tr>
        <td>DarkGray</td>
        <td>深灰色</td>
        <td>#A9A9A9</td>
        <td style="background-color: #A9A9A9">&nbsp;</td>
    </tr>
    <tr>
        <td>DarkGreen</td>
        <td>深绿色</td>
        <td>#006400</td>
        <td style="background-color: #006400">&nbsp;</td>
    </tr>
    <tr>
        <td>DarkKhaki</td>
        <td>深卡其布色</td>
        <td>#BDB76B</td>
        <td style="background-color: #BDB76B">&nbsp;</td>
    </tr>
    <tr>
        <td>DarkMagenta</td>
        <td>深洋红色</td>
        <td>#8B008B</td>
        <td style="background-color: #8B008B">&nbsp;</td>
    </tr>
    <tr>
        <td>DarkOliveGreen</td>
        <td>深橄榄绿色</td>
        <td>#556B2F</td>
        <td style="background-color: #556B2F">&nbsp;</td>
    </tr>
    <tr>
        <td>DarkOrange</td>
        <td>深橙色</td>
        <td>#FF8C00</td>
        <td style="background-color: #FF8C00">&nbsp;</td>
    </tr>
    <tr>
        <td>DarkOrchid</td>
        <td>深兰花紫</td>
        <td>#9932CC</td>
        <td style="background-color: #9932CC">&nbsp;</td>
    </tr>
    <tr>
        <td>DarkRed</td>
        <td>深红色</td>
        <td>#8B0000</td>
        <td style="background-color: #8B0000">&nbsp;</td>
    </tr>
    <tr>
        <td>DarkSalmon</td>
        <td>深鲑鱼色</td>
        <td>#E9967A</td>
        <td style="background-color: #E9967A">&nbsp;</td>
    </tr>
    <tr>
        <td>DarkSeaGreen</td>
        <td>深海绿色</td>
        <td>#8FBC8F</td>
        <td style="background-color: #8FBC8F">&nbsp;</td>
    </tr>
    <tr>
        <td>DarkSlateBlue</td>
        <td>深岩蓝色</td>
        <td>#483D8B</td>
        <td style="background-color: #483D8B">&nbsp;</td>
    </tr>
    <tr>
        <td>DarkSlateGray</td>
        <td>深石板灰</td>
        <td>#2F4F4F</td>
        <td style="background-color: #2F4F4F">&nbsp;</td>
    </tr>
    <tr>
        <td>DarkTurquoise</td>
        <td>深绿松石色</td>
        <td>#00CED1</td>
        <td style="background-color: #00CED1">&nbsp;</td>
    </tr>
    <tr>
        <td>DarkViolet</td>
        <td>深紫罗兰色</td>
        <td>#9400D3</td>
        <td style="background-color: #9400D3">&nbsp;</td>
    </tr>
    <tr>
        <td>DeepPink</td>
        <td>深粉红色</td>
        <td>#FF1493</td>
        <td style="background-color: #FF1493">&nbsp;</td>
    </tr>
    <tr>
        <td>DeepSkyBlue</td>
        <td>深天蓝色</td>
        <td>#00BFFF</td>
        <td style="background-color: #00BFFF">&nbsp;</td>
    </tr>
    <tr>
        <td>DimGray</td>
        <td>暗灰色</td>
        <td>#696969</td>
        <td style="background-color: #696969">&nbsp;</td>
    </tr>
    <tr>
        <td>DodgerBlue</td>
        <td>道奇蓝</td>
        <td>#1E90FF</td>
        <td style="background-color: #1E90FF">&nbsp;</td>
    </tr>
    <tr>
        <td>FireBrick</td>
        <td>砖红色</td>
        <td>#B22222</td>
        <td style="background-color: #B22222">&nbsp;</td>
    </tr>
    <tr>
        <td>FloralWhite</td>
        <td>花白色</td>
        <td>#FFFAF0</td>
        <td style="background-color: #FFFAF0">&nbsp;</td>
    </tr>
    <tr>
        <td>ForestGreen</td>
        <td>森林绿</td>
        <td>#228B22</td>
        <td style="background-color: #228B22">&nbsp;</td>
    </tr>
    <tr>
        <td>Fuchsia</td>
        <td>紫红色</td>
        <td>#FF00FF</td>
        <td style="background-color: #FF00FF">&nbsp;</td>
    </tr>
    <tr>
        <td>Gainsboro</td>
        <td>苍白灰</td>
        <td>#DCDCDC</td>
        <td style="background-color: #DCDCDC">&nbsp;</td>
    </tr>
    <tr>
        <td>GhostWhite</td>
        <td>幽灵白</td>
        <td>#F8F8FF</td>
        <td style="background-color: #F8F8FF">&nbsp;</td>
    </tr>

    <tr>
        <td>Gold</td>
        <td>金色</td>
        <td>#FFD700</td>
        <td style="background-color: #FFD700">&nbsp;</td>
    </tr>
    <tr>
        <td>GoldenRod</td>
        <td>金菊色</td>
        <td>#DAA520</td>
        <td style="background-color: #DAA520">&nbsp;</td>
    </tr>
    <tr>
        <td>Gray</td>
        <td>灰色</td>
        <td>#808080</td>
        <td style="background-color: #808080">&nbsp;</td>
    </tr>
    <tr>
        <td>Green</td>
        <td>绿色</td>
        <td>#008000</td>
        <td style="background-color: #008000">&nbsp;</td>
    </tr>
    <tr>
        <td>GreenYellow</td>
        <td>黄绿色</td>
        <td>#ADFF2F</td>
        <td style="background-color: #ADFF2F">&nbsp;</td>
    </tr>
    <tr>
        <td>HoneyDew</td>
        <td>蜂蜜露</td>
        <td>#F0FFF0</td>
        <td style="background-color: #F0FFF0">&nbsp;</td>
    </tr>
    <tr>
        <td>HotPink</td>
        <td>热粉色</td>
        <td>#FF69B4</td>
        <td style="background-color: #FF69B4">&nbsp;</td>
    </tr>
    <tr>
        <td>IndianRed</td>
        <td>印度红</td>
        <td>#CD5C5C</td>
        <td style="background-color: #CD5C5C">&nbsp;</td>
    </tr>
    <tr>
        <td>Indigo</td>
        <td>靛蓝色</td>
        <td>#4B0082</td>
        <td style="background-color: #4B0082">&nbsp;</td>
    </tr>
    <tr>
        <td>Ivory</td>
        <td>象牙白</td>
        <td>#FFFFF0</td>
        <td style="background-color: #FFFFF0">&nbsp;</td>
    </tr>
    <tr>
        <td>Khaki</td>
        <td>卡其色</td>
        <td>#F0E68C</td>
        <td style="background-color: #F0E68C">&nbsp;</td>
    </tr>
    <tr>
        <td>Lavender</td>
        <td>薰衣草紫</td>
        <td>#E6E6FA</td>
        <td style="background-color: #E6E6FA">&nbsp;</td>
    </tr>
    <tr>
        <td>LavenderBlush</td>
        <td>薰衣草红晕</td>
        <td>#FFF0F5</td>
        <td style="background-color: #FFF0F5">&nbsp;</td>
    </tr>
    <tr>
        <td>LawnGreen</td>
        <td>草地绿</td>
        <td>#7CFC00</td>
        <td style="background-color: #7CFC00">&nbsp;</td>
    </tr>
    <tr>
        <td>LemonChiffon</td>
        <td>柠檬绸色</td>
        <td>#FFFACD</td>
        <td style="background-color: #FFFACD">&nbsp;</td>
    </tr>
    <tr>
        <td>LightBlue</td>
        <td>浅蓝色</td>
        <td>#ADD8E6</td>
        <td style="background-color: #ADD8E6">&nbsp;</td>
    </tr>
    <tr>
        <td>LightCoral</td>
        <td>浅珊瑚色</td>
        <td>#F08080</td>
        <td style="background-color: #F08080">&nbsp;</td>
    </tr>
    <tr>
        <td>LightCyan</td>
        <td>浅青色</td>
        <td>#E0FFFF</td>
        <td style="background-color: #E0FFFF">&nbsp;</td>
    </tr>
    <tr>
        <td>LightGoldenRodYellow</td>
        <td>浅金菊黄色</td>
        <td>#FAFAD2</td>
        <td style="background-color: #FAFAD2">&nbsp;</td>
    </tr>
    <tr>
        <td>LightGray</td>
        <td>浅灰色</td>
        <td>#D3D3D3</td>
        <td style="background-color: #D3D3D3">&nbsp;</td>
    </tr>
    <tr>
        <td>LightGreen</td>
        <td>浅绿色</td>
        <td>#90EE90</td>
        <td style="background-color: #90EE90">&nbsp;</td>
    </tr>
    <tr>
        <td>LightPink</td>
        <td>浅粉色</td>
        <td>#FFB6C1</td>
        <td style="background-color: #FFB6C1">&nbsp;</td>
    </tr>

    <tr>
        <td>LightSalmon</td>
        <td>浅鲑鱼色</td>
        <td>#FFA07A</td>
        <td style="background-color: #FFA07A">&nbsp;</td>
    </tr>
    <tr>
        <td>LightSeaGreen</td>
        <td>浅海绿色</td>
        <td>#20B2AA</td>
        <td style="background-color: #20B2AA">&nbsp;</td>
    </tr>
    <tr>
        <td>LightSkyBlue</td>
        <td>浅天蓝色</td>
        <td>#87CEFA</td>
        <td style="background-color: #87CEFA">&nbsp;</td>
    </tr>
    <tr>
        <td>LightSlateGray</td>
        <td>浅石板灰</td>
        <td>#778899</td>
        <td style="background-color: #778899">&nbsp;</td>
    </tr>
    <tr>
        <td>LightSteelBlue</td>
        <td>浅钢青色</td>
        <td>#B0C4DE</td>
        <td style="background-color: #B0C4DE">&nbsp;</td>
    </tr>
    <tr>
        <td>LightYellow</td>
        <td>浅黄色</td>
        <td>#FFFFE0</td>
        <td style="background-color: #FFFFE0">&nbsp;</td>
    </tr>
    <tr>
        <td>Lime</td>
        <td>酸橙绿</td>
        <td>#00FF00</td>
        <td style="background-color: #00FF00">&nbsp;</td>
    </tr>
    <tr>
        <td>LimeGreen</td>
        <td>柠檬绿</td>
        <td>#32CD32</td>
        <td style="background-color: #32CD32">&nbsp;</td>
    </tr>

    <tr>
        <td>Linen</td>
        <td>亚麻色</td>
        <td>#FAF0E6</td>
        <td style="background-color: #FAF0E6">&nbsp;</td>
    </tr>
    <tr>
        <td>Magenta</td>
        <td>品红色</td>
        <td>#FF00FF</td>
        <td style="background-color: #FF00FF">&nbsp;</td>
    </tr>
    <tr>
        <td>Maroon</td>
        <td>栗色</td>
        <td>#800000</td>
        <td style="background-color: #800000">&nbsp;</td>
    </tr>
    <tr>
        <td>MediumAquaMarine</td>
        <td>中度海蓝宝石色</td>
        <td>#66CDAA</td>
        <td style="background-color: #66CDAA">&nbsp;</td>
    </tr>
    <tr>
        <td>MediumBlue</td>
        <td>中度蓝色</td>
        <td>#0000CD</td>
        <td style="background-color: #0000CD">&nbsp;</td>
    </tr>
    <tr>
        <td>MediumOrchid</td>
        <td>中度兰花紫</td>
        <td>#BA55D3</td>
        <td style="background-color: #BA55D3">&nbsp;</td>
    </tr>
    <tr>
        <td>MediumPurple</td>
        <td>中度紫色</td>
        <td>#9370DB</td>
        <td style="background-color: #9370DB">&nbsp;</td>
    </tr>
    <tr>
        <td>MediumSeaGreen</td>
        <td>中度海洋绿</td>
        <td>#3CB371</td>
        <td style="background-color: #3CB371">&nbsp;</td>
    </tr>
    <tr>
        <td>MediumSlateBlue</td>
        <td>中度板岩蓝</td>
        <td>#7B68EE</td>
        <td style="background-color: #7B68EE">&nbsp;</td>
    </tr>
    <tr>
        <td>MediumSpringGreen</td>
        <td>中度春绿色</td>
        <td>#00FA9A</td>
        <td style="background-color: #00FA9A">&nbsp;</td>
    </tr>

    <tr>
        <td>MediumTurquoise</td>
        <td>中度绿松石色</td>
        <td>#48D1CC</td>
        <td style="background-color: #48D1CC">&nbsp;</td>
    </tr>
    <tr>
        <td>MediumVioletRed</td>
        <td>中度紫罗兰红色</td>
        <td>#C71585</td>
        <td style="background-color: #C71585">&nbsp;</td>
    </tr>
    <tr>
        <td>MidnightBlue</td>
        <td>子夜蓝</td>
        <td>#191970</td>
        <td style="background-color: #191970">&nbsp;</td>
    </tr>
    <tr>
        <td>MintCream</td>
        <td>薄荷奶油色</td>
        <td>#F5FFFA</td>
        <td style="background-color: #F5FFFA">&nbsp;</td>
    </tr>
    <tr>
        <td>MistyRose</td>
        <td>雾玫瑰色</td>
        <td>#FFE4E1</td>
        <td style="background-color: #FFE4E1">&nbsp;</td>
    </tr>
    <tr>
        <td>Moccasin</td>
        <td>鹿皮鞋色</td>
        <td>#FFE4B5</td>
        <td style="background-color: #FFE4B5">&nbsp;</td>
    </tr>
    <tr>
        <td>NavajoWhite</td>
        <td>纳瓦霍白</td>
        <td>#FFDEAD</td>
        <td style="background-color: #FFDEAD">&nbsp;</td>
    </tr>
    <tr>
        <td>Navy</td>
        <td>海军蓝</td>
        <td>#000080</td>
        <td style="background-color: #000080">&nbsp;</td>
    </tr>
    <tr>
        <td>OldLace</td>
        <td>老式花边白</td>
        <td>#FDF5E6</td>
        <td style="background-color: #FDF5E6">&nbsp;</td>
    </tr>
    <tr>
        <td>Olive</td>
        <td>橄榄色</td>
        <td>#808000</td>
        <td style="background-color: #808000">&nbsp;</td>
    </tr>

    <tr>
        <td>OliveDrab</td>
        <td>橄榄褐</td>
        <td>#6B8E23</td>
        <td style="background-color: #6B8E23">&nbsp;</td>
    </tr>
    <tr>
        <td>Orange</td>
        <td>橙色</td>
        <td>#FFA500</td>
        <td style="background-color: #FFA500">&nbsp;</td>
    </tr>
    <tr>
        <td>OrangeRed</td>
        <td>橙红色</td>
        <td>#FF4500</td>
        <td style="background-color: #FF4500">&nbsp;</td>
    </tr>
    <tr>
        <td>Orchid</td>
        <td>兰花紫</td>
        <td>#DA70D6</td>
        <td style="background-color: #DA70D6">&nbsp;</td>
    </tr>
    <tr>
        <td>PaleGoldenRod</td>
        <td>苍白金菊色</td>
        <td>#EEE8AA</td>
        <td style="background-color: #EEE8AA">&nbsp;</td>
    </tr>
    <tr>
        <td>PaleGreen</td>
        <td>苍白绿色</td>
        <td>#98FB98</td>
        <td style="background-color: #98FB98">&nbsp;</td>
    </tr>
    <tr>
        <td>PaleTurquoise</td>
        <td>苍白绿松石色</td>
        <td>#AFEEEE</td>
        <td style="background-color: #AFEEEE">&nbsp;</td>
    </tr>
    <tr>
        <td>PaleVioletRed</td>
        <td>苍白紫罗兰红色</td>
        <td>#DB7093</td>
        <td style="background-color: #DB7093">&nbsp;</td>
    </tr>

    <tr>
        <td>PapayaWhip</td>
        <td>木瓜奶油色</td>
        <td>#FFEFD5</td>
        <td style="background-color: #FFEFD5">&nbsp;</td>
    </tr>
    <tr>
        <td>PeachPuff</td>
        <td>桃皮色</td>
        <td>#FFDAB9</td>
        <td style="background-color: #FFDAB9">&nbsp;</td>
    </tr>
    <tr>
        <td>Peru</td>
        <td>秘鲁色</td>
        <td>#CD853F</td>
        <td style="background-color: #CD853F">&nbsp;</td>
    </tr>
    <tr>
        <td>Pink</td>
        <td>粉红色</td>
        <td>#FFC0CB</td>
        <td style="background-color: #FFC0CB">&nbsp;</td>
    </tr>
    <tr>
        <td>Plum</td>
        <td>李紫色</td>
        <td>#DDA0DD</td>
        <td style="background-color: #DDA0DD">&nbsp;</td>
    </tr>
    <tr>
        <td>PowderBlue</td>
        <td>雪青蓝</td>
        <td>#B0E0E6</td>
        <td style="background-color: #B0E0E6">&nbsp;</td>
    </tr>
    <tr>
        <td>Purple</td>
        <td>紫色</td>
        <td>#800080</td>
        <td style="background-color: #800080">&nbsp;</td>
    </tr>
    <tr>
        <td>Red</td>
        <td>红色</td>
        <td>#FF0000</td>
        <td style="background-color: #FF0000">&nbsp;</td>
    </tr>
    <tr>
        <td>RosyBrown</td>
        <td>玫瑰棕色</td>
        <td>#BC8F8F</td>
        <td style="background-color: #BC8F8F">&nbsp;</td>
    </tr>


    <tr>
        <td>RoyalBlue</td>
        <td>宝蓝色</td>
        <td>#4169E1</td>
        <td style="background-color: #4169E1">&nbsp;</td>
    </tr>
    <tr>
        <td>SaddleBrown</td>
        <td>马鞍棕色</td>
        <td>#8B4513</td>
        <td style="background-color: #8B4513">&nbsp;</td>
    </tr>
    <tr>
        <td>Salmon</td>
        <td>鲑鱼色</td>
        <td>#FA8072</td>
        <td style="background-color: #FA8072">&nbsp;</td>
    </tr>
    <tr>
        <td>SandyBrown</td>
        <td>沙褐色</td>
        <td>#F4A460</td>
        <td style="background-color: #F4A460">&nbsp;</td>
    </tr>
    <tr>
        <td>SeaGreen</td>
        <td>海洋绿色</td>
        <td>#2E8B57</td>
        <td style="background-color: #2E8B57">&nbsp;</td>
    </tr>
    <tr>
        <td>SeaShell</td>
        <td>海贝壳色</td>
        <td>#FFF5EE</td>
        <td style="background-color: #FFF5EE">&nbsp;</td>
    </tr>
    <tr>
        <td>Sienna</td>
        <td>赭石色</td>
        <td>#A0522D</td>
        <td style="background-color: #A0522D">&nbsp;</td>
    </tr>
    <tr>
        <td>Silver</td>
        <td>银白色</td>
        <td>#C0C0C0</td>
        <td style="background-color: #C0C0C0">&nbsp;</td>
    </tr>
    <tr>
        <td>SkyBlue</td>
        <td>天蓝色</td>
        <td>#87CEEB</td>
        <td style="background-color: #87CEEB">&nbsp;</td>
    </tr>
    <tr>
        <td>SlateBlue</td>
        <td>石板蓝</td>
        <td>#6A5ACD</td>
        <td style="background-color: #6A5ACD">&nbsp;</td>
    </tr>

    <tr>
        <td>SlateGray</td>
        <td>石板灰色</td>
        <td>#708090</td>
        <td style="background-color: #708090">&nbsp;</td>
    </tr>
    <tr>
        <td>Snow</td>
        <td>雪白色</td>
        <td>#FFFAFA</td>
        <td style="background-color: #FFFAFA">&nbsp;</td>
    </tr>
    <tr>
        <td>SpringGreen</td>
        <td>春绿色</td>
        <td>#00FF7F</td>
        <td style="background-color: #00FF7F">&nbsp;</td>
    </tr>
    <tr>
        <td>SteelBlue</td>
        <td>钢青色</td>
        <td>#4682B4</td>
        <td style="background-color: #4682B4">&nbsp;</td>
    </tr>
    <tr>
        <td>Tan</td>
        <td>茶色</td>
        <td>#D2B48C</td>
        <td style="background-color: #D2B48C">&nbsp;</td>
    </tr>
    <tr>
        <td>Teal</td>
        <td>鸭绿色</td>
        <td>#008080</td>
        <td style="background-color: #008080">&nbsp;</td>
    </tr>
    <tr>
        <td>Thistle</td>
        <td>蓟色</td>
        <td>#D8BFD8</td>
        <td style="background-color: #D8BFD8">&nbsp;</td>
    </tr>
    <tr>
        <td>Tomato</td>
        <td>番茄红</td>
        <td>#FF6347</td>
        <td style="background-color: #FF6347">&nbsp;</td>
    </tr>
    <tr>
        <td>Turquoise</td>
        <td>绿松石色</td>
        <td>#40E0D0</td>
        <td style="background-color: #40E0D0">&nbsp;</td>
    </tr>
    <tr>
        <td>Violet</td>
        <td>紫罗兰色</td>
        <td>#EE82EE</td>
        <td style="background-color: #EE82EE">&nbsp;</td>
    </tr>
    <tr>
        <td>Wheat</td>
        <td>小麦色</td>
        <td>#F5DEB3</td>
        <td style="background-color: #F5DEB3">&nbsp;</td>
    </tr>
    <tr>
        <td>White</td>
        <td>白色</td>
        <td>#FFFFFF</td>
        <td style="background-color: #FFFFFF">&nbsp;</td>
    </tr>
    <tr>
        <td>WhiteSmoke</td>
        <td>白烟色</td>
        <td>#F5F5F5</td>
        <td style="background-color: #F5F5F5">&nbsp;</td>
    </tr>

    <tr>
        <td>Yellow</td>
        <td>黄色</td>
        <td>#FFFF00</td>
        <td style="background-color: #FFFF00">&nbsp;</td>
    </tr>
    <tr>
        <td>YellowGreen</td>
        <td>黄绿色</td>
        <td>#9ACD32</td>
        <td style="background-color: #9ACD32">&nbsp;</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>

二、效果

在这里插入图片描述

三、解释

这段代码展示了一个基本的颜色表,方便参考使用。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8355.html
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!