iro颜色取值器选择器示例代码

代码语言:html

所属分类:选择器

代码描述:iro颜色取值器选择器示例代码

代码标签: iro 颜色 取值器 选择器 示例 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">



    <style>
        body {
          color: #fff;
          background: #171F30;
          line-height: 150%;
        }
        
        .wrap {
          min-height: 100vh;
          max-width: 720px;
          margin: 0 auto;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
        }
        .wrap .half {
          width: 50%;
          padding: 32px 0;
        }
        
        .title {
          font-family: sans-serif;
          line-height: 24px;
          display: block;
          padding: 8px 0;
        }
        
        .readout {
          margin-top: 32px;
          line-height: 180%;
        }
        
        #values {
          font-family: monospace;
          line-height: 150%;
        }
        
        .link {
          margin-top: 16px;
        }
        .link a {
          color: MediumSlateBlue;
        }
    </style>




</head>


<body>
    <div class="wrap">
        <div class="half">
            <div class="colorPicker"></div>
        </div>
        <div class="half readout">
   
            <span class="title">Selected Color:</span>
            <div id="values"></div>
            <input id="hexInput"></input>
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0