bootcss\u5b98\u7f51\u6709\u4e2a\u8fd9\u4e2a\u9875\u9762\uff0c\u770b\u4e86\u540e\u89c9\u5f97\u86ee\u597d\u770b\u7684 \u81ea\u5df1\u5199\u4e86\u4e00\u4e2a\u73a9\u73a9\u513f\u3002<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"zh-CN\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"renderer\" content=\"webkit\">\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\r\n <title>web\u5b89\u5168\u8272<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n html,\r\n body {\r\n width: 100%;\r\n height: 100%;\r\n font-size: 12px;\r\n background-color: #efefef;\r\n }\r\n h1 {\r\n height: 100px;\r\n line-height: 100px;\r\n font-size: 36px;\r\n text-align: center;\r\n }\r\n .color-list {\r\n display: -webkit-flex;\r\n display: -moz-flex;\r\n display: -ms-flex;\r\n display: -o-flex;\r\n display: flex;\r\n width: 1000px;\r\n margin: 0 auto;\r\n justify-content: space-between;\r\n align-items: space-between;\r\n flex-wrap: wrap;\r\n overflow-y: auto;\r\n }\r\n .color-item {\r\n width: 150px;\r\n height: 190px;\r\n margin-bottom: 20px;\r\n border-radius: 8px;\r\n border: 1px solid #ccc;\r\n box-shadow: 3px 2px 3px #ccc;\r\n }\r\n .color-block {\r\n width: 148px;\r\n height: 130px;\r\n border-radius: 5px;\r\n border-bottom: 1px solid #ccc;\r\n }\r\n .color-code {\r\n height: 36px;\r\n line-height: 18px;\r\n padding-left: 10px;\r\n margin-top: 10px;\r\n }\r\n .color-code strong {\r\n margin-right: 14px;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <h1>WEB\u5b89\u5168\u8272DEMO<\/h1>\r\n <div class=\"color-list\" id=\"color-list\"><\/div>\r\n <script>\r\n window.onload = () => {\r\n\r\n let format = (num) => ('0' + num.toString(16)).slice(-2)\r\n\r\n let arr = [0, 0, 0],\r\n dom = []\r\n\r\n while (arr[0] <= 5) {\r\n\r\n let arr2 = arr.map((ele) => ele * 51)\r\n\r\n let hex = '#' + arr2.map((ele) => format(ele)).join('').toUpperCase(),\r\n rgb = arr2.join(', ')\r\n\r\n arr[2]++\r\n if (arr[2] > 5) {\r\n\r\n arr[2] = 0\r\n arr[1]++\r\n\r\n if (arr[1] > 5) {\r\n\r\n arr[0]++\r\n arr[1] = 0\r\n }\r\n }\r\n dom.push(`<div class=\"color-item\">\r\n <div class=\"color-block\" style=\"background-color: ${hex};\"><\/div>\r\n <div class=\"color-code\">\r\n <p><strong>HEX:<\/strong><span>${hex}<\/span><\/p>\r\n <p><strong>RGB:<\/strong><span>${rgb}<\/span><\/p>\r\n <\/div><\/div>`)\r\n }\r\n document.querySelector('#color-list').innerHTML = dom.join('')\r\n\r\n setInterval(() => document.querySelector('h1').style.color = '#' + Math.random().toString(16).slice(2, 8), 233)\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html><\/pre>\n\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » WEB\u5b89\u5168\u8272<\/a><\/p>","protected":false},"excerpt":{"rendered":"bootcss\u5b98\u7f51\u6709\u4e2a\u8fd9\u4e2a\u9875\u9762\uff0c\u770b\u4e86\u540e\u89c9\u5f97\u86ee\u597d\u770b\u7684 \u81ea\u5df1\u5199\u4e86\u4e00\u4e2a\u73a9\u73a9\u513f\u3002 <!DOCTYPE html> <html lang=”zh-CN”> <head> &l […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2705"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2705"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2705\/revisions"}],"predecessor-version":[{"id":2706,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2705\/revisions\/2706"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2705"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2705"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}