html5cssjs代码 018颜色表

news2024/11/15 11:14:47

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>

二、效果

在这里插入图片描述

三、解释

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1517721.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

15. jwt认证中间件

在上一篇登录功能的实现中&#xff0c;我们使用了jwt作为鉴权组件&#xff0c;其中登录后会颁发token。前端在访问后续请求时&#xff0c;可以带上这个token。对于一些需要权限校验的请求&#xff0c;我们就需要验证这个token&#xff0c;从token中获取到用户id&#xff08;有了…

8-图像放大

其实&#xff0c;就是开辟一个zoomwidth&#xff0c;zoomheight的内存&#xff0c;再分别赋值即可。 void CDib::Maginify(float xZoom, float yZoom) { //指向原图像指针 LPBYTE p_data GetData(); //指向原像素的指针 LPBYTE lpSrc; //指向缩放图像对应像素的指针 LPBYTE l…

实验二 基本搜索技术 五星图案节点填上数字+遍历所有黑点+门牌号

目的&#xff1a; 1. 掌握递归和排序 2. 掌握BFS与队列 3. 掌握DFS和递归 4. 熟悉并理解回溯问题 实验内容&#xff1a; 1.在五星图案节点填上数字&#xff1a;1~12&#xff0c;不包括7和11。 要求每条直线上数字和相等。 如图就是一个恰当的填法。 请搜索所有可能的填…

SpringMVC请求、响应和拦截器的使用

SpringMVC请求 RequestMapping注解 RequestMapping注解的作用是建立请求URL和处理方法之间的对应关系 RequestMapping注解可以作用在方法和类上 1. 作用在类上&#xff1a;第一级的访问目录 2. 作用在方法上&#xff1a;第二级的访问目录 3. 细节&#xff1a;路径可以不编写…

在Django中使用PyJWT实现登录及验证功能

目录 1、安装PyJWT 2、对信息加密及解密 3、配置登录视图和及url 4、登录装饰器 5、在验证有登录权限的的视图中登录 PyJWT的使用 1、安装PyJWT pip isntall pyjwt 2、对信息加密及解密 import jwt import datetime from jwt import exceptions# 加密盐 JWT_SALT &qu…

深入探索Java中的MarkWord与锁优化机制——无锁、偏向锁、自旋锁、重量级锁

引言 在Java并发编程领域&#xff0c;有效管理对共享资源的访问显得尤为关键。为了保障线程安全&#xff0c;Java虚拟机&#xff08;JVM&#xff09;引入了一系列精妙的锁机制&#xff0c;这其中的核心概念就是Java对象头中的MarkWord。本文将详尽解析MarkWord的作用&#xff…

CVPR2024 | 大核卷积新高度101x101,美团提出PeLK

https://arxiv.org/pdf/2403.07589.pdf 本文概述 最近&#xff0c;一些大核卷积网络以吸引人的性能和效率进行了反击。然而&#xff0c;考虑到卷积的平方复杂度&#xff0c;扩大内核会带来大量的参数&#xff0c;而大量的参数会引发严重的优化问题。由于这些问题&#xff0c;当…

code摘录日记[矩阵变元素,变列向量,3D表面图,table行列设置] Matlab

矩阵变元素&#xff0c;变列向量 W1(Z1 < Z2) nan; % Z1,Z2 all matrix,Only plot points where Z1 > Z2;Z1 < Z2位置值填为NaNx x(:); % Now x is a 30-by-1 vector; matrix变列vector技巧3D表面图 hand figure; % Handle to the figure, for more plotting later…

QComboBox相关的qss学习

QT有关QCobobox控件的样式设置&#xff08;圆角、下拉框&#xff0c;向上展开、可编辑、内部布局等&#xff09;_qcombobox样式-CSDN博客 原始图&#xff1a; 红色边框&#xff1a; QComboBox{ border:2px solid rgb(255, 85, 0); } 绿色背景&#xff1a; QComboBox{ border…

[云原生] Prometheus自动服务发现部署

一、部署服务发现 1.1 基于文件的服务发现 基于文件的服务发现是仅仅略优于静态配置的服务发现方式&#xff0c;它不依赖于任何平台或第三方服务&#xff0c;因而也是最为简单和通用的实现方式。 Prometheus Server 会定期从文件中加载 Target 信息&#xff0c;文件可使用 YAM…

App Inventor 2 Clipboard 拓展:实现剪贴板的复制粘贴功能

效果如下&#xff1a; 此 Clipboard 拓展由中文网开发及维护&#xff0c;最新版本 v1.0&#xff0c;基于 TaifunClipboard 开发。 使用方法 属性及方法很简单&#xff0c;默认操作成功后显示提示信息&#xff0c;SuppressToast设置为 假 后&#xff0c;则不显示提示信息。 经测…

中创ET4410台式电桥固件升级工具(修复了列表扫描的BUG)

中创ET4410台式LCR数字电桥固件升级工具和最新版固件&#xff08;修复了列表扫描的BUG&#xff09; 中创ET4410 台式LCR数字电桥 简单开箱测评&#xff1a;https://blog.zeruns.tech/archives/763.html 之前买的中创ET4410台式LCR数字电桥固件有BUG&#xff08;胜利的VC4090C…

OpenCV实战(33)——OpenCV与深度学习的碰撞

OpenCV实战&#xff08;33&#xff09;——OpenCV与深度学习的碰撞 0. 前言1. 深度学习和卷积神经网络2. 使用深度学习进行人脸检测2.1 SSD 简介2.2 使用 SSD 执行人脸检测 3. 完整代码小结系列链接 0. 前言 深度学习是机器学习的一个子领域&#xff0c;基于传统的神经网络和卷…

6-LINUX-- C 程序的编译与调试

一.环境搭建 1.gcc的安装 1>.切换到管理员模式 sudo su ----> 输入密码 2>.apt install gcc //C语言的编译环境 3>.apt install g //c编译环境的搭建 4>.install update //软件升级 2.gcc分步编译链接 &#xff08;1&#xff09;预编译 gcc -E…

如何配置Apache的反向代理

目录 前言 一、反向代理的工作原理 二、Apache反向代理的配置 1. 安装Apache和相关模块 2. 配置反向代理规则 3. 重启Apache服务器 三、常见的使用案例 1. 负载均衡 2. 缓存 3. SSL加密 总结 前言 随着Web应用程序的不断发展和扩展&#xff0c;需要处理大量的请求和…

DDos攻击如何被高防服务器有效防范?

德迅云安全-领先云安全服务与解决方案提供商 什么是DDos攻击&#xff1f; DDos攻击是一种网络攻击手段&#xff0c;旨在通过使目标系统的服务不可用或中断&#xff0c;导致无法正常使用网络服务。DDos攻击可以采取多种方式实施&#xff0c;包括洪水攻击、压力测试、UDP Flood…

Python基于大数据的豆瓣电影分析,豆瓣电影可视化系统,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

Xcode 15.3 Archive失败

Xcode 15.3 Archive失败 背景 升级 Xcode 到 15.3&#xff0c;真机运行正常。打包的时候发现 Archive 失败。 提示&#xff1a; Call parameter type does not match function signature! 仔细看报错里是和HandyJSON相关的提示。 解决 起初以为和 Pod 库有关系&#xff0c;…

数据库04 - 03 E-R图案例,E-R图转换成为关系模式

大学的E-R图 01. 02.解释 E-R图转换成为关系模式 一.强实体集的转化 01.实体是对应的元组 02.实体集的主码就是关系模式中的主码 例如&#xff1a; 03.强实体集的复合属性 例如&#xff1a; 实体集instructor 关系模式instructor&#xff08;没有派生和多值&#xff09…

Vue手写模拟步骤条

效果图&#xff1a; 如果要使用element的步骤条就需要强行修改样式&#xff0c;参考之前的那篇步骤条。这里我采用手写div 代码&#xff1a; 思路是给最外层的div一个左边框&#xff0c;给里面的step-item设置左边框为图片&#xff0c;通过定位来移动。 <div class"m…