css样式的颜色表达方式+彩虹小人

最新推荐文章于 2024-03-08 22:24:47 发布

潜龙卧湖

最新推荐文章于 2024-03-08 22:24:47 发布

阅读量606

点赞数 1

文章标签：前端 css 彩虹小人颜色

本文链接：https://blog.csdn.net/weixin_44046450/article/details/93232189

版权

css样式的颜色表达方式+彩虹小人

css样式的颜色表达方式有三种。
第一种就是直接用英文的颜色来表达。
第二种就是通过16进制来表示，具体的颜色是什么样的代码，请自行解决，我也不知道，我是通过在火狐上的吸色管或者ps的吸色管获取。具体方式请百度一下。
第三种是通过rgb数值来表示。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .yingwen{
            color:red;
        }
        .shuzizifu{
            color: #904425;
        }
        .rgbasd{
            color:rgb(53, 50, 205);
        }
    </style>
</head>

<body>
    <div class="yingwen">这是第一种颜色的表达方式</div>
    <div class="shuzizifu">这是第二种颜色的表达方式</div>
    <div class="rgbasd">这是第三种颜色的表达方式</div>
</body>
</html>

效果如下：
在这里插入图片描述
彩虹小人：这个是我自己做的。
代码参上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>七彩</title>
    <style>
        .qicai{
            width: 550px;
            height: 250px;
            overflow: hidden;
            position: relative;
            margin: 150px auto;
        }
        .hongse{
            width: 500px;
            height: 500px;
            border: 17px #FF0000  solid;
            border-radius: 50%;
            position: absolute;
        }
        .chengse{
            width: 450px;
            height: 450px;
            border: 17px #FF7F00 solid;
            border-radius: 50%;
            position: absolute;
            top: 20px;
            left: 25px;
        }
        .huangse{
            width: 410px;
            height: 450px;
            border: 17px #FFFF00  solid;
            border-radius: 50%;
            position: absolute;
            top: 40px;
            left: 45px;
        }
        .lvse{
            width: 370px;
            height: 450px;
            border: 17px #00FF00  solid;
            border-radius: 50%;
            position: absolute;
            top: 62px;
            left: 65px;
        }
        .qingse{
            width: 330px;
            height: 450px;
            border: 17px #00FFFF  solid;
            border-radius: 50%;
            position: absolute;
            top: 82px;
            left: 84px;
        }
        .lanse{
            width: 285px;
            height: 450px;
            border: 17px #0000FF  solid;
            border-radius: 50%;
            position: absolute;
            top: 105px;
            left: 106px;
        }
        .zise{
            width: 250px;
            height: 450px;
            border: 17px #8B00FF  solid;
            border-radius: 50%;
            position: absolute;
            top: 125px;
            left: 125px;
        }
        .tou{
            border: 5px solid #000000;
            height: 20px;
            width: 20px;
            border-radius: 50%;
            position: absolute;
            top: 150px;
            left: 250px;
        }
        .shenti{
            border: 5px solid #000000;
            height: 30px;
            width: 20px;
            position: absolute;
            top: 180px;
            left: 250px;
        }
        .zuoshou{
            border-right: 5px solid #000000;
            height: 30px;
            width: 20px;
            position: absolute;
            top: 185px;
            left: 223px;
        }
        .youshou{
            border-right: 5px solid #000000;
            height: 30px;
            width: 20px;
            position: absolute;
            top: 185px;
            left: 262px;
        }
        .zuojiao{
            border-right: 5px solid #000000;
            height: 20px;
            width: 20px;
            position: absolute;
            top: 225px;
            left: 235px;
        }
        .youjiao{
            border-right: 5px solid #000000;
            height: 20px;
            width: 20px;
            position: absolute;
            top: 225px;
            left: 250px;
        }
    </style>
</head>
<body>
    <div class="qicai">
        <div class="hongse"></div>
        <div class="chengse"></div>
        <div class="huangse"></div>
        <div class="lvse"></div>
        <div class="qingse"></div>
        <div class="lanse"></div>
        <div class="zise"></div>
        <div class="xiaoren">
            <div class="tou"></div>
            <div class="shenti"></div>
            <div class="zuoshou"></div>
            <div class="youshou"></div>
            <div class="zuojiao"></div>
            <div class="youjiao"></div>
        </div>

    </div>
</body>
</html>