html5 css3 配色表

最新推荐文章于 2024-03-08 13:43:03 发布
最新推荐文章于 2024-03-08 13:43:03 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qqq_11101/article/details/50659767
版权

这里用css3中结构伪类：nth-child(i) 和nth-of-type(i)的组合来实现配色表。注意：nth-of-type(odd) 选中奇数行 ，nth-of-type(even)选中偶数行。

<!DOCTYPE html>
<html>
<head>
    <title>配色表</title>
    <meta charset="utf-8">
    <style type="text/css">
        tr td{width: 80px; height: 30px;}
        tr th{width: 80px; height: 30px;}
        /*第一行：tr:nth-child(i) td:nth-of-type(j)选中第i行的第j个td,由于每行第一个都是th,这里要过滤掉th,所以用nth-of-type */
        tr:nth-child(2) td:nth-of-type(1){background:hsl(120,100%,100%)}
        tr:nth-child(2) td:nth-of-type(2){background:hsl(120,75%,100%)}
        tr:nth-child(2) td:nth-of-type(3){background:hsl(120,50%,100%)}
        tr:nth-child(2) td:nth-of-type(4){background:hsl(120,25%,100%)}
        tr:nth-child(2) td:nth-of-type(5){background:hsl(120,0%,100%)}
        /*第二行*/
        tr:nth-child(3) td:nth-of-type(1){background:hsl(120,100%,90%)}
        tr:nth-child(3) td:nth-of-type(2){background:hsl(120,75%,90%)}
        tr:nth-child(3) td:nth-of-type(3){background:hsl(120,50%,90%)}
        tr:nth-child(3) td:nth-of-type(4){background:hsl(120,25%,90%)}
        tr:nth-child(3) td:nth-of-type(5){background:hsl(120,0%,90%)}
        /*第三行*/
        tr:nth-child(4) td:nth-of-type(1){background:hsl(120,100%,80%)}
        tr:nth-child(4) td:nth-of-type(2){background:hsl(120,75%,80%)}
        tr:nth-child(4) td:nth-of-type(3){background:hsl(120,50%,80%)}
        tr:nth-child(4) td:nth-of-type(4){background:hsl(120,25%,80%)}
        tr:nth-child(4) td:nth-of-type(5){background:hsl(120,0%,80%)}
        /*第三行*/
        tr:nth-child(4) td:nth-of-type(1){background:hsl(120,100%,80%)}
        tr:nth-child(4) td:nth-of-type(2){background:hsl(120,75%,80%)}
        tr:nth-child(4) td:nth-of-type(3){background:hsl(120,50%,80%)}
        tr:nth-child(4) td:nth-of-type(4){background:hsl(120,25%,80%)}
        tr:nth-child(4) td:nth-of-type(5){background:hsl(120,0%,80%)}
        /*第三行*/
        tr:nth-child(4) td:nth-of-type(1){background:hsl(120,100%,80%)}
        tr:nth-child(4) td:nth-of-type(2){background:hsl(120,75%,80%)}
        tr:nth-child(4) td:nth-of-type(3){background:hsl(120,50%,80%)}
        tr:nth-child(4) td:nth-of-type(4){background:hsl(120,25%,80%)}
        tr:nth-child(4) td:nth-of-type(5){background:hsl(120,0%,80%)}
        /*第三行*/
        tr:nth-child(4) td:nth-of-type(1){background:hsl(120,100%,80%)}
        tr:nth-child(4) td:nth-of-type(2){background:hsl(120,75%,80%)}
        tr:nth-child(4) td:nth-of-type(3){background:hsl(120,50%,80%)}
        tr:nth-child(4) td:nth-of-type(4){background:hsl(120,25%,80%)}
        tr:nth-child(4) td:nth-of-type(5){background:hsl(120,0%,80%)}
        /*第三行*/
        tr:nth-child(4) td:nth-of-type(1){background:hsl(120,100%,80%)}
        tr:nth-child(4) td:nth-of-type(2){background:hsl(120,75%,80%)}
        tr:nth-child(4) td:nth-of-type(3){background:hsl(120,50%,80%)}
        tr:nth-child(4) td:nth-of-type(4){background:hsl(120,25%,80%)}
        tr:nth-child(4) td:nth-of-type(5){background:hsl(120,0%,80%)}
        /*第三行*/
        tr:nth-child(4) td:nth-of-type(1){background:hsl(120,100%,80%)}
        tr:nth-child(4) td:nth-of-type(2){background:hsl(120,75%,80%)}
        tr:nth-child(4) td:nth-of-type(3){background:hsl(120,50%,80%)}
        tr:nth-child(4) td:nth-of-type(4){background:hsl(120,25%,80%)}
        tr:nth-child(4) td:nth-of-type(5){background:hsl(120,0%,80%)}
        /*第四行*/
        tr:nth-child(5) td:nth-of-type(1){background:hsl(120,100%,70%)}
        tr:nth-child(5) td:nth-of-type(2){background:hsl(120,75%,70%)}
        tr:nth-child(5) td:nth-of-type(3){background:hsl(120,50%,70%)}
        tr:nth-child(5) td:nth-of-type(4){background:hsl(120,25%,70%)}
        tr:nth-child(5) td:nth-of-type(5){background:hsl(120,0%,70%)}
        /*第五行*/
        tr:nth-child(6) td:nth-of-type(1){background:hsl(120,100%,60%)}
        tr:nth-child(6) td:nth-of-type(2){background:hsl(120,75%,60%)}
        tr:nth-child(6) td:nth-of-type(3){background:hsl(120,50%,60%)}
        tr:nth-child(6) td:nth-of-type(4){background:hsl(120,25%,60%)}
        tr:nth-child(6) td:nth-of-type(5){background:hsl(120,0%,60%)}
        /*第六行*/
        tr:nth-child(7) td:nth-of-type(1){background:hsl(120,100%,50%)}
        tr:nth-child(7) td:nth-of-type(2){background:hsl(120,75%,50%)}
        tr:nth-child(7) td:nth-of-type(3){background:hsl(120,50%,50%)}
        tr:nth-child(7) td:nth-of-type(4){background:hsl(120,25%,50%)}
        tr:nth-child(7) td:nth-of-type(5){background:hsl(120,0%,50%)}
        /*第七行*/
        tr:nth-child(8) td:nth-of-type(1){background:hsl(120,100%,40%)}
        tr:nth-child(8) td:nth-of-type(2){background:hsl(120,75%,40%)}
        tr:nth-child(8) td:nth-of-type(3){background:hsl(120,50%,40%)}
        tr:nth-child(8) td:nth-of-type(4){background:hsl(120,25%,40%)}
        tr:nth-child(8) td:nth-of-type(5){background:hsl(120,0%,40%)}
        /*第八行*/
        tr:nth-child(9) td:nth-of-type(1){background:hsl(120,100%,30%)}
        tr:nth-child(9) td:nth-of-type(2){background:hsl(120,75%,30%)}
        tr:nth-child(9) td:nth-of-type(3){background:hsl(120,50%,30%)}
        tr:nth-child(9) td:nth-of-type(4){background:hsl(120,25%,30%)}
        tr:nth-child(9) td:nth-of-type(5){background:hsl(120,0%,30%)}
        /*第九行*/
        tr:nth-child(10) td:nth-of-type(1){background:hsl(120,100%,20%)}
        tr:nth-child(10) td:nth-of-type(2){background:hsl(120,75%,20%)}
        tr:nth-child(10) td:nth-of-type(3){background:hsl(120,50%,20%)}
        tr:nth-child(10) td:nth-of-type(4){background:hsl(120,25%,20%)}
        tr:nth-child(10) td:nth-of-type(5){background:hsl(120,0%,20%)}
        /*第十行*/
        tr:nth-child(11) td:nth-of-type(1){background:hsl(120,100%,10%)}
        tr:nth-child(11) td:nth-of-type(2){background:hsl(120,75%,10%)}
        tr:nth-child(11) td:nth-of-type(3){background:hsl(120,50%,10%)}
        tr:nth-child(11) td:nth-of-type(4){background:hsl(120,25%,10%)}
        tr:nth-child(11) td:nth-of-type(5){background:hsl(120,0%,10%)}
        /*第十一行*/
        tr:nth-child(12) td:nth-of-type(1){background:hsl(120,100%,0%)}
        tr:nth-child(12) td:nth-of-type(2){background:hsl(120,75%,0%)}
        tr:nth-child(12) td:nth-of-type(3){background:hsl(120,50%,0%)}
        tr:nth-child(12) td:nth-of-type(4){background:hsl(120,25%,0%)}
        tr:nth-child(12) td:nth-of-type(5){background:hsl(120,0%,0%)}



    </style>
</head>
<body>
<table border="1px">
    <tr>
        <th>亮度↓饱和度→</th>
        <th>100%</th>
        <th>75%</th>
        <th>50%</th>
        <th>25%</th>
        <th>0%</th>
    </tr>
    <tr>
        <th>100%</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th>90%</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th>80%</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th>70%</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th>60%</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th>50%</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th>40%</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th>30%</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th>20%</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th>10%</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th>0%</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
</body>
</html>

运行结果：
这里写图片描述

蕉风夜雨
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML网页颜色与配色方案
吃不胖.
09-04 1059
在进行配色方案设计时，需要根据网站的品牌形象、风格、内容与用户需求等多个因素进行综合考虑，选出最合适的配色方案。HTML支持的颜色名称有16种，分别是aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white和yellow。传统配色方案是指采用黑色、白色和灰色等中性色作为主色调，再以深蓝、深绿、深棕等颜色作为辅色调，形成的配色方案。渐变配色方案是指采用渐变色形式的颜色搭配，形成色彩渐变的效果。
HTML配色代码(内含3种配色代码)
11-12
HTML网页代码配色，可以直接放于服务器上测试
HTML5系列代码中，主色调红色的配色方案表如下
BLOG域名:programb.blog.csdn.net
06-30 1301
这个代码示例展示了一个简单的HTML5页面，其中主色调为红色。标题（h1）和链接（a）的颜色都是红色，而段落（p）的颜色为深灰色。
HTML配色方案
Tang961216的博客
02-23 715
1.蓝色清新 #376AB3;#87C0CA;#E8EDB9 2.红绿轻奢 #C0D09D;#2A6868;#E6755F 3.粉蓝浪潮 #25367A;#AED0ED;#EBD0C2 4.粉红动人 #F4B3C2;#644649 5. 抹茶遇上玫瑰 #4781C3;#8CB7A2
HTML配色表（非常实用）
u011762625的博客
09-10 6855
aliceblue (#F0F8FF) antiquewhite (#FAEBD7) aqua (#00FFFF) aquamarine (#7FFFD4) azure (#F0FFFF) beige (#F5F5DC) bisque (#FFE4C4) black (#000000) blanchedalmond
颜色名称及色样表(HTML版)
chritina的专栏
03-30 3392
颜色名称及色样表(HTML版)  名称 Color Name 中文名称 Hex RGB 十进制 Decimal 数值   LightPink 浅粉红 #FFB6C1 255,182,193     Pink 粉红 #FFC0CB 255,192,203     Crimson 深红(猩红) #DC143C 220,2
html5+css3
03-19
### HTML5与CSS3知识点概览 #### 一、HTML5基础 - **HTML5简介**：HTML5是超文本标记语言（HyperText Markup Language）的第五次重大修改，是用于构建网页的标准标记语言之一。它引入了许多新的功能，使得Web开发...
HTML5+CSS3 国外酒店模板
04-10
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富、视觉吸引且具有高度响应性的网站提供了强大的工具。这个"HTML5+CSS3 国外酒店模板"是专门为酒店行业设计的一个网站模板，它结合了最新的HTML5元素和...
简洁博客html5兼css3网站模板
04-02
【简洁博客html5兼css3网站模板】是一个专为个人博客设计的网页模板，它结合了现代网页技术HTML5和CSS3，旨在提供一个既美观又功能丰富的展示平台。这个模板以其简洁的设计风格吸引眼球，适合那些希望用简单、清爽的...
个性css3色彩html5网站模板
04-02
CSS3是层叠样式表的最新版本，相比CSS2，它引入了大量新特性，如选择器、边框与背景、文本效果、2D/3D转换、动画、多列布局等。在个性化的网页设计中，CSS3的运用可以让网站更加丰富多彩。例如，使用新的伪类选择器`...
黑白经典html5和css3主题网页模板
04-02
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富、视觉吸引的网页提供了强大的工具。这个“黑白经典html5和css3主题网页模板”是一个实用资源，可以帮助开发者快速构建具有时尚感和专业性的网站。 ...
HTML5样式的颜色名称全集
11-18
该颜色图片是HTML5样式的颜色名称全集，例如color: lightblue;字体颜色为lightblue
html 网页配色,配色就是这么简单！7个在线配色网站推荐
weixin_28692817的博客
06-15 5511
配色对一个网站的来说非常重要，优秀的但网页配色更多的需要大量的实践去体会。简单来说，颜色能对人的情绪产生影响，不同的人对色彩的感知会大不一样，但现实情况中，不同的颜色究竟能承载多少信息量，能传递什么情绪感觉，与颜色背后的品牌也是息息相关，互相影响的。但做为一个拥有美丽配色的今天我们分享6个在线配色网站，他们每一个都非常好用，又有各自的特点，值的收藏！一、 LOL Colors超级推荐的网站，打开后...
CSS 颜色代码大全 CSS颜色对照表
热门推荐
hnyanzijun1的博客
07-20 4万+
HTML及CSS常用颜色英文词汇 黑色 银色 灰色 白色 茶色 红色 紫色 紫红 black silver gray white maroon red purple fuchsia #000000 #C0C0C0
css颜色大全
qq_56666376的博客
09-07 3262
css颜色大全
CSS系列之 颜色代码大全、颜色对照表
最新发布
Java 技术专栏，从入门到精通，熟悉企业级开发
03-08 7513
前端页面想要好看，CSS少不了，CSS想要学得好，配色也是一大绝活，今天为大家带来CSS颜色表。MARK一下，这章内容是常访问内容之一。资料获取，更多粉丝福利，关注下方公众号获取。
html中按钮配色推荐,20个漂亮的“标准的”css配色方案参考
weixin_33957278的博客
06-23 3951
20个“标准的”配色方案,属于网络收集，电脑里保存的，拿出来作为参考，大家可以一起讨论一下.Colorsbody{margin:20px;font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:12px;}.style1{width: 800px;height: 100px;margin: 0px auto;marg...
htmlcss网页设计代码案例_配色高手！一组有范又高级的深色网页设计案例解析...
weixin_39979516的博客
11-05 719
我们日常所看到的网页设计大多是浅色系和亮色系，作为神秘色系的黑色总给人一种严肃的感觉，它可以很低调，也可以很奢华，但永不过时。深色网站总是给人以个性而充满高品质的感觉。浅色或亮色文本或图片，搭配深色背景，起到视觉上的层级呼应，突出主题的同时，瞬间吸引用户注意，赋予界面生命力。如何设计深色系网页？1、运用白色的文字和深色背景形成反差效果虽然深色背景容易给人压抑的感觉，但是把深色背景运用到白色文字上面...
"HTML5移动开发技术及旅游网站设计
HTML5移动开发技术是目前移动互联网开发中的一项重要技术，它主要运用HTML、CSS、JavaScript、jQuery等相关技术以及DreamweaverCS6工具来设计和构建网站。本文要求设计一个名为爱旅行的旅游网站，网站要具备一系列...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值