【HTML】颜色和选择器

最新推荐文章于 2021-06-03 08:15:54 发布
最新推荐文章于 2021-06-03 08:15:54 发布
阅读量1.3k 收藏
点赞数
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XHoler/article/details/108803299
版权

颜色与单位

一.颜色

  • 相关的概念
  1. 色调：指图像的相对明暗程度，也称色相。 通俗来说就是颜色。
  2. 饱和度：指色彩的鲜艳程度，也称色彩的纯度或彩度。是颜色中灰色的含量。饱和最大灰色为零
  3. 亮度：指色彩的明暗差异，也称色彩明度。是颜色中黑色的含量。亮度最大黑色为零
    饱和度、亮度和色调是色彩的三要素
  4. 对比度：前景色与背景色之间的差异。差异越大，对比度越大。
  5. web安全色：一个色板，些颜色可以安全的应用于所有的Web中.
    具体颜色参考网站：https://www.bootcss.com/p/websafecolors
  • 前景色与背景色
  • 前景色：在css中是color属性，color还表示文本内容的颜色。
用法：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>颜色</title>
    <style>
        h2{
            color: aqua;
        }
    </style>
</head>
<body>
    <h2>床前明月光，疑是地上霜</h2>
</body>
</html>
  • 背景色：css中由background-color属性设置背景色，默认属性为transparent(透明)
用法：
<head>
    <style>
        p{
            background-color: black;
        }
    </style>
</head>
<body>
    <p>床前明月光，疑是地上霜</p>
    <p>举头望明月，把酒问青天</p>
</body>
  • 颜色值的类型
  • 颜色值是一种标准RGB色彩空间的颜色，可通过以下三种类型进行定义：
    1. 色彩关键字：是一个不分大小写的标识符，如red、blue、black等。
      transparent关键字表示一个完全透明的颜色。
    2. RGB模式：就是红-绿-蓝 Red-Green-Blue的简称。通过这三种颜色互相叠加组合成各种颜色。
      在css中使用RGB色彩模式的方式：
      • 十六进制符号：#RRGGBB和#RGB
      • #RRGGBB：#后6个十六进制字符（0-9，A-F）
      • #RGB：#后3个十六进制字符
      • #ff0033可简写为#f03
    3. 函数符：rgb(R,G,B)
      • R,G,B的值可以用0255或0%100%之间的值
      • 这里的255和100%是一样的，相对于十六进制FF

几种用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>颜色</title>
    <style>
        #p1{
            color: #FFCC33;
            background-color: rgb(137,0,137);
        }
        #p2{
            color:#FC3;
        }
    </style>
</head>
<body>
    <p id="p1">转朱阁,低绮户,照无眠</p>
    <p id="p2">不应有恨，明月长向别时圆</p>
</body>
</html>
  1. HSL模式：是Hue-Saturation-Lightness 色调-饱和度-亮度的简称。是一种将RGB色彩模型中的点在圆柱坐标系中的表示法。 CSS3 版本新增用法。
    在CSS中用hsl(H,S,L)函数实现：
    • H表示色调，范围0~360之间的一个角度。
    • S表示饱和度，范围0%~100%之间的百分百。
    • L表示亮度，用百分比表示，0%黑色，50%标准色，100%白色
用法：
<head>
    <style>
        .test{
            background-color: hsl(99, 66%, 30%);
        }
    </style>
</head>
<body>
    <p class="test">你在这里不要走动，我去给你买几个橘子</p>
</body>
  • 透明度
    • CSS3版本中新增了opacity属性用来设置透明度，值介于0~1之间。
      • 值为0或0.0表示完全透明
      • 值为0.5表示半透明
      • 值为1或1.0表示不透明

用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色</title>
    <style>
        #op1{
            opacity: 1;
        }
        #op2{
            opacity: 0.7;
        }
        #op3{
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <p id="op1">老夫从未见过如此厚颜无耻之人</p>
    <p id="op2">ohhhhhhhhhhh</p>
    <p id="op3">李斯拉里人呀</p>
</body>
</html>

  • 可以结合RGB模式和HSL模式使用

    RGB模式增加了rgba(R,G,B,A)，A表示透明度

    HSL增加了hsl(H,S,L,A)，A表示透明度

  • 颜色模式

    四种颜色模式：

    • CSS2 版本的是 rgb() 函数
    • CSS3 新增加了 rgba()、hsl() 和 hsla() 函数。

二. 单位

  • 相关概念
  1. 值：
#op3{
        background-color: red;
    }
   
background-color是属性    red是设定的值

  1. 单位：描述长度值时附加单位。
    CSS中有两种不同的长度单位：

    绝对长度单位
    长度是固定的、不变化，常见绝对长度单位如下

单位名称等价换算
cm厘米1cm = 96px/2.54
mm毫米1mm = 1/10th of 1cm
Q四分之一毫米1Q = 1/40th of 1cm
in英寸1in = 2.54cm = 96px
pc十二点活字1pc = 1/16th of 1in
pt点1pt = 1/72th of 1in
px像素1px = 1/96th of 1in
  • 相对长度单位
    • 一般有明确的参照物，比绝对长度单位更适用于复杂的屏幕输出
单位相对于
em父元素的字体大小
ex字符“x”的高度
ch数字“0”的宽度
rem根元素的字体大小
lh元素的line-height
vw视窗宽度的1%
vh视窗高度的1%
vmin视窗较小尺寸的1%
vmax视图大尺寸的1%
  • 像素值(px)
    是构成图片的最小单元，像素(px)是绝对单位，显示器的（PPI）一般都是由物理元件决定的
  • 百分比(%)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>百分比</title>
    <style>
        .parent{
            width: 400px;
            height: 200px;
            border: 3px solid burlywood;
        }
        #child1{
            width: 40%;
            height: 100px;
            background-color: aqua;
        }
        #child2{
            width: 80%;
            height: 100px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>
</body>
</html>
  • em和rem
    • em：是相对于当前 HTML元素的父级元素来进行设置。
    • rem：是相对于当前 HTML根元素（<html>）来进行设置。

上述 2 种单位都具有如下 3 种情况：

  • 小于 1 时：表示相对于父级元素或根元素缩小。例如 0.5em 表示是父级元素的 0.5 倍，0.5rem 表示是根元素的 0.5 倍。
  • 等于 1 时：表示与父级元素或根元素的大小保持一致。
  • 大于 1 时：表示相对于父级元素或根元素放大。例如 1.5em 表示是父级元素的 1.5 倍，1.5rem 表示是根元素的 1.5 倍。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>em AND rem</title>
    <style>
        html{
            font-size: 18px;
        }
        .ems li{
            font-size: 1.3em;
        }

        .rems li{
            font-size: 1.3rem;
        }
    </style>
</head>
<body>
    <ul class="ems">
        <li>One</li>
        <li>Tow</li>
        <li>三
            <ul>
                <li>3-11111</li>
                <li>3-22222
                    <ul>
                        <li>3-22222-11111</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

    <ul class="rems">
        <li>One</li>
        <li>Tow</li>
        <li>三
            <ul>
                <li>3-11111</li>
                <li>3-22222
                    <ul>
                        <li>3-22222-11111</li>
                        <li>1111111111111</li>
                        <li>1111111111</li>
                    </ul>
                    <li>1111111111111111</li>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

三. 结构化元素

  • 相关概念

    • 结构化元素就是指HTML元素中具有明确含义和作用的元素，例如 <p> 元素表示段落
      如下列表所示展示了部分 HTML 4.01 版本的结构化元素：

      • 标题元素（<h1> ~ <h6>）
      • 段落元素（<p>）
      • 粗体元素（<b>）
      • 斜体元素（<i>）
      • 上标元素（<sup>）与下标元素（<sub>）
      • 换行符（<br>）
      • 水平线元素（<hr>）

    • 如下列表所示展示了部分 HTML5 版本新增的结构化元素：

      • <article> 元素
      • <section> 元素
      • <nav> 元素
      • <aside> 元素
      • <header> 元素
      • <main> 元素
      • <footer> 元素

  • 标题元素：

<h1>这是标题一</h1>
<h2>这是标题二</h2>
<h3>这是标题三</h3>
<h4>这是标题四</h4>
<h5>这是标题五</h5>
<h6>这是标题六</h6>
  • 段落元素 <p>：
可用margin取消行间距，如下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>结构化元素</title>
    <style>
        p{
            margin: 0;
        }
    </style>
</head>
<body>
    <p>我是一个段落.</p>
    <p>巧了我也是一个段落.</p>
</body>
</html>
  • 粗体元素 <b>：
让文本显示粗体更好的方式用CSS的font-weight属性设置为bold,如下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>结构化元素</title>
    <style>
        p{
            margin: 0;
        }
        
        #p1{
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>我是一个段落.</p>
    <p>巧了我也是一个段落.</p>
    <p><b>我</b>比你们<b>粗</b></p>
    <p id="p1">上面的，我比你更粗的均匀</p>
</body>
</html>
  • 倾斜元素 <i>：
就是斜体
<p><i>我是歪的</i></p>
  • 上标<sup> 与下标<sub>：
<sup> 上标元素元素显示更高更小。
<sub> 下标元素元素显示更低更小。

用法：
    <p>我<sup>上</sup>来了</p>
    <p>我<sub>下</sub>去了</p>
  • 换行符 <br>：
<p>我断了<br>一半掉下去了</p>
  • 水平线 <hr>:
表示段落元素之间的主题转换

<p>我下面有道线</p>
<hr>

四. HTML5 版本的结构化元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>结构化元素</title>
    <style>
        p{
            margin: 0;
        }
        
        #p1{
            font-weight: bold;
        }

        aside{
            width: 28%;
            padding-left: .5rem;
            margin-left: .5rem;
            float: right;
            box-shadow: inset 5px 0 5px -5px #666666;
            color: royalblue;
        }
    </style>
</head>
<body>
    <h1>标题一</h1>
    <h2>标题二</h2>
    <h3>标题三</h3>
    <h4>标题四</h4>
    <h5>标题五</h5>
    <h6>标题六</h6>
    <p>我是一个段落.</p>
    <p>巧了我也是一个段落.</p>
    <p><b>我</b>比你们<b>粗</b></p>
    <p id="p1">上面的，我比你更粗的均匀</p>
    <p><i>我是歪的</i></p>
    <p>我<sup>上</sup>来了</p>
    <p>我<sub>下</sub>去了</p>
    <p>我断了<br>一半掉下去了</p>
    <p>我下面有道线</p>
    <hr>
    <article>
        <h1>ni hao</h1>
        <p>我是article元素，我定义HTML页面中的可独立分配或可复用结构<small>例如论坛的帖子、新闻网站的文章等</small></p>
    </article>
    
    <section>
        <h1>HI I Am section</h1>
        <p>我也是独立部分</p>
            <article>
                <p>我是子部分</p>
            </article>
        <article>
            <p>我是下面的</p>
        </article>
    </section>
    
    <nav>
        <ul>
            <li><p>我是nav，我用来定义导航链接。比如菜单，目录，索引</p></li>
            <li><a href="#">计算机网络基础</a></li>
            <li><a href="#">C++</a></li>
            <li><a href="#">编程艺术</a></li>
        </ul>
    </nav>
    
    <aside>
        俺是aside，我是独立于你们的存在，我不受你们影响。  我来当侧边栏。
    </aside>

    <header>
        <h2>
            我是header，我来定义引导和导航内容。 如logo、搜索框
        </h2>
    </header>

    <main>
        <h2>我是main</h2>
        <p>我用来定义主要内容</p>
        <p>一个页面只能有一个我，不能出现在article>元素、aside元素、nav元素、header元素和footer元素的内部</p>
    <main>

    <footer>
        <ul>
            <li>footer定义一个章节内容或根元素的页脚</li>
            <li>一个页脚通常包含该章节作者、版权数据或文档相关链接等信息</li>
        </ul>
    </footer>
</body>
</html>

text-size属性

  • 设置阴影，可以设置多个，之间用逗号隔开。 有四个值:颜色 水平位置 垂直位置 阴影范围 颜色可以放最后，阴影范围可以不设。
  • 例如：
<head>
<style>
.h{
        font-size: 56px;
    text-shadow: 0 1px #808d93,
      -1px 0 #cdd2d5,
      -1px 2px #808d93,
      -2px 1px #cdd2d5,
      -2px 3px #808d93,
      -3px 2px #cdd2d5,
      -3px 4px #808d93,
      -4px 3px #cdd2d5,
      -4px 5px #808d93,
      -5px 4px #cdd2d5,
      -5px 6px #808d93,
      -6px 5px #cdd2d5,
      -6px 7px #808d93,
      -7px 6px #cdd2d5,
      -7px 8px #808d93,
      -8px 7px #cdd2d5;
}
.r{
            font-size: 46px;
            text-shadow: 0 0 20px #fefcc9,
                     10px -10px 30px #feec85,
                     -20px -20px 40px #ffae34,
                     20px -30px 35px #ec760c,
                     -20px -40px 40px #cd4606,
                     0 -50px 65px #973716,
                     10px -70px 70px #451b0e;
}
</style>
</head>
<body>
    <p class="h">惑也，终不解矣。</p>
    <p class="r">野火烧不尽，春风吹又生</p>
</body>

效果：

捕获.JPG

字体测试示例

最终效果：

捕获.JPG

  • 分析：由一个HTML页面、一个CSS文件、一个JS文件组成
    • HTML页面：主体由一个表单和多个嵌套div组成，div中有单选按钮组，用link外联CSS文件
部分结构：
段落
表单 action="createShorHand()"
    标签1 class="cf"
        子标签1 class="setPropCont"
            单选按钮 name="font_family"
            单选按钮
            单选按钮
            单选按钮 同上
        子标签2 class="setPropCont"
            单选按钮 name="font_family"
            单选按钮 
            单选按钮 同上
    标签2 class="cf"
        子标签2-1 class="propInputCont"
            单选按钮 class="curCss"
标签3 class="fontShortHand"

  • CSS文件：
    主要用到的属性：

    • float：left; 左浮动

    • text-align：center; 文本居中

    • margin-right:设置右侧外边间距

    • margin-bottom:设置下外边间距

    • border-bottom：设置下边框

    • display: table; 设置显示类型

    • clear：both； 清除浮动z

    • height:高

    • width:宽

  • JS文件：

    • var:声明变量

    • getElementsByClassName：根据 class 属性值获取一组元素节点对象

    • document:为对网页内部文档的操作，它基本上所有的东西都可以操作，一般用来操作一些标签

    • getElementById: 返回指定 ID 的元素

    • getElementsByTagName:返回带有指定标签名的对象的集合

    • appendChild: 向当前节点的子节点列表的末尾添加新的子节点

var textAreas = document.getElementsByClassName("curCss"),
    shortText = "",
    getCheckedValue,
    setCss,
    getProperties,
    injectCss;

getProperties = function () {           
    shortText =
        getCheckedValue("font_style") + " " +         
        getCheckedValue("font_variant") + " " +
        getCheckedValue("font_weight") + " " +
        getCheckedValue("font_size") +
        getCheckedValue("line_height") + " " +
        getCheckedValue("font_family");
    
    return shortText;               
}

getCheckedValue = function(radio_name){              
    oRadio = document.forms[0].elements[radio_name];
    for(var i = 0; i < oRadio.length; i++){
        if(oRadio[i].checked){
            var propInput ="input_" + radio_name,
                curElemName = "input_" + radio_name,
                curElem = document.getElementById(curElemName);
            curElem.value = oRadio[i].value;

            return oRadio[i].value;      
        }
    }
}

setCss = function(){     
    getProperties();      
    injectCss(shortText);   
}

injectCss = function(cssFragment){         
    old = document.body.getElementsByTagName("style");   
    if(old.length > 1){                                   
        old[1].parentElement.removeChild(old[1]);     
    }
    css = document.createElement("style");          
    css.innerHTML = ".fontShortHand{font: " + cssFragment + "}";   
    document.body.appendChild(css);    
}

setCss();

伪类选择器

一. 动态伪类选择器

  • 可以划分为链接中锚点的伪类选择器和用户行为的伪类选择器，如下：
伪类选择器类型描述
e:link链接锚点伪类选择器匹配的 e 元素，定义了超链接并且未被访问过
e:visited链接锚点伪类选择器匹配的 e 元素，定义了超链接并且已被访问过
e:active用户行为伪类选择器匹配的 e 元素，定义了超链接并且被激活
e:hover用户行为伪类选择器匹配的e元素，定义了超链接并且用户鼠标悬停在链接文本内容上
e:focus用户行为伪类选择器匹配的 e 元素，定义了超链接并且获得焦点
  • 在<a>元素应用如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>链接</title>
    <style>
        a:link{
            color: aqua;
        }
        a:visited{
            color: red;
        }
        a:active{
            color: black;
        }
        a:hover{
            color: fuchsia;
        }
        a:focus{
            color: orange;
        }
    </style>
</head>
<body>
    <a target="_blank" href="www.baidu.com">百度度度度度度度度度度度度度度</a>
    <a href="#">我是一个空链接</a>
    <a href="www.baidu.com">百度</a>
    <a target="_blank" href="#">ooooooooooo</a>
</body>
</html>
  • 其他元素也可以使用动态伪类选择器，如:
<button>按钮配合：hover

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>链接</title>
    <style>
        button:hover{
            color: aqua;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>
        <button>一个按钮</button>
    </div>
</body>
</html>
  
注意：在触摸屏上 :hover 基本不可用。不同的浏览器上:hover 伪类表现不同。

二. 目标伪类选择器

  • 指的是CSS中的:target伪类选择器，该伪类选择器用来设置 <a> 元素锚点功能中的目标元素的样式。
    用法：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>目标伪类选择器</title>
    <style>
        p:target{
            background-color:aqua;
        }

        p:target::before{
            font: 70% sans-serif;
            content: ">";
            color: blanchedalmond;
            margin-right: .25em;
        }

        p:target i{
            color: red;
        }
    </style>
</head>
<body>
    <h3>The Change is Every</h3>
    <ol>
        <li><a href="#p1">aaaaaaaaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#p1">bbbbbbbbbbbbbbbbbbbbbbb</a></li>
        <li><a href="#nowhere">ccccccccccccccccccccccccccccccc
            cccccccccccccccccccccccccccccccc</a></li>
    </ol>
    <h3>I Am fever</h3>
    <p id="p1">you jump,i don't jump</p>
    <p id="p2">oh my god</p>
</body>
</html>
韶音鄀逝
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
颜色选择器html组件,ColorPicker 颜色选择器
weixin_28932617的博客
06-04 1379
ColorPicker 颜色选择器ColorPicker 颜色选择器用于颜色选择，支持多种格式。基础用法有默认值无默认值使用 v-model 与 Vue 实例中的一个变量进行双向绑定，绑定的变量需要是字符串类型。有默认值无默认值export default {data() {return {color1: '#409EFF',color2: null}}};选择透明度ColorPicker 支持普...
HTML颜色选择器实现代码
09-05
在 HTML 中实现颜色选择器可以通过使用 JavaScript、CSS 和 HTML 的结合来实现。 首先，在 HTML 中，我们可以使用 `<input>` 元素来创建一个文本框，并添加 `onmouseover` 事件来触发选择颜色的函数。然后，我们...
一个Html版本的颜色选择器
02-28
一个html版本的颜色选择器，通过一个颜色选择器可以在一个输入框里得到选中颜色的编码和效果。很方便。
canvas
qq_41370549的博客
07-11 403
canvas 在渲染复杂的动效，把数据可视化图形显示，游戏场景等需求，都会用canvas技术，比dom操作性能更高 特点： 1.h5的新增图形标签，通过提供的javaScript函数绘制各种图表或利用算法是吸纳非常华丽的动效 2，在以前是用flash实现，但不能和js交互 3,适合动态图形绘制 缺点 是位图，缩放会模糊。 svg意为可缩放矢量图形（Scalable Vector Graphics）。 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于
HTML颜色选择
Hunter的博客
10-29 1172
该网站提供了颜色选择工具 https://htmlcolorcodes.com/zh/jiaocheng/html-wenzi-yanse/
html简易颜色选择器,HTML颜色选择器实现代码
weixin_42295892的博客
06-03 1083
HTML颜色选择器实现代码HTML颜色选择器范围：#000 - #FFF//  ');}document.writeln('');var begin = 0;for (var i = 0; i ');for (var g = begin; g');}}document.writeln('');}}// ]]>[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]时间： 2010-11-2...
HTML颜色选择器
11-13
HTML颜色选择器的实现往往依赖于JavaScript和DOM（Document Object Model）。在给定的部分代码中，我们可以看到一个简单的颜色选择器实现方式： 1. **使用`<object>`标签引入外部组件**：代码中的`<object>`标签...
web网页端颜色选择器
12-01
"web网页端颜色选择器"这一主题涵盖了许多相关技术，包括HTML5、CSS3以及JavaScript库如jQuery。以下是对这些知识点的详细说明： 1. **颜色选择器**： 颜色选择器通常是一个交互式组件，它提供了一种直观的方式来...
js颜色选择器
01-19
在`jscolor-example.html`这个示例文件中，我们可以看到颜色选择器的用法和效果。通常，这个文件会包含HTML结构、CSS样式和JavaScript代码，展示了如何在实际项目中集成和使用`jscolor.js`。通过查看和分析这个示例...
简单的html颜色选择器
superzlc的专栏
08-26 9655
查资料参照着做了一个，用来理解颜色选择器，效果如图： 主要渐变色显示和颜色计算，还有点小问题，勉强能自用 &lt;style&gt; .select-color { } .select-color .select-color-aaa { display:inline-block;width:256px;height:256px;background-color:#ff0000; } ....
html网页颜色选择器
06-12
让你无需记住各种颜色代码就可以制作出缤纷多彩的html网页。
网页颜色选择器
07-07
网页上选择一些颜色，可以对字体颜色修饰等
颜色选择器
04-15
颜色选择器，根据你的不同选择可以选择不同的颜色
选择自己的颜色php代码,（超好用）html 颜色选择器的用法
weixin_29745227的博客
03-12 380
本篇文章给大家带来的内容是关于(超好用)html 颜色选择器的用法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。@*以下 是测试html 颜色选择器的*@@*onclick="initColorPicker('demo'); return false" id="demo"style="position:absolute;left:200px">颜色选择*@@*var col...
HTML颜色的选取
Wangzx的博客
07-12 2283
HTML颜色的选取: https://html-color-codes.info/chinese/
html简易颜色选择器,html 颜色选择器 亲测，很好用
weixin_35090568的博客
06-03 530
@*以下 是测试html 颜色选择器的*@@*颜色选择*@@*var colorPicker = function (idStr) {this.colorPool = ["#000000", "#993300", "#333300", "#003300", "#003366", "#000080", "#333399", "#333333", "#800000", "#FF6600", "#808...
html简易颜色选择器,简单的html颜色选择器
weixin_39922534的博客
06-03 638
查资料参照着览或讲琐了过自系一读页围这就多网解元当维做了一个，用来理解颜色选择器，效果如直分调浏器代，刚求的一学础过功互有解小久宗点差维含数图：主要渐变和第，。年过事工宗据指数遍互业经搞断果会色显示和颜色计算，还有点小问题，抖要支圈者器说是事天开的。年后编定功口小发还应久剑勉强能自用.select-color {}.select-color .select-color-aaa {display:i...
html 颜色选择器
最新发布
05-30
HTML 颜色选择器有多种方式，其中比较常用的是使用颜色名称、十六进制值或 RGB 值来指定颜色。 1. 使用颜色名称 可以直接使用颜色名称来指定颜色，例如： ```html ;">这是红色文本 ``` 2. 使用十六进制值 可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值