140网页配色测试页V3.4（最终版）源码

最新推荐文章于 2022-09-03 10:22:19 发布

electricperi

最新推荐文章于 2022-09-03 10:22:19 发布

阅读量1.2k

点赞数

分类专栏： JS 文章标签：测试 border div function c float

本文链接：https://blog.csdn.net/electricperi/article/details/1429604

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这是最后一版了，今后不再更新了。

相对旧版本：

加宽了网页显示。这个工具起源于多年前，当时网页还是800px的窄版式，于是扩宽。

增加了反转色查询。方便于使用对比色配色。

效果浏览做了标签页切换，页面长度大大减小。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>140网页预定义色配色测试页V3.4 【宽版】</title> <mce:script language="javascript" type="text/javascript"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">html, body { border-style:groove; border-width:1px; margin:0; text-align: center; background: #FFFFFF;; padding-left:3px; padding-right:3px; padding-top:1px; padding-bottom:1px } #title { background: #ffffff; width: 980px; height: 70px; text-align: center; font-family: 楷体_GB2312; font-size: 36px; color: #4169E1; font-weight:bold; padding-top:15px; } #main { margin:auto; width: 980px } #TestArea { float: right; width: 720px; height:910px; border:1px solid #C0C0C0; } #ColorBox { } #colorshow { width: 240 px; height: 60 px; border:1px solid #C0C0C0; } #colors { border:1px solid #C0C0C0; width: 240px; height: 300px } #empty {height: 4px; font-size: 4px;} #fontcolor { float: left; text-align: left; width: 230px; height:64px; padding-left: 10px; } #backcolor { float:left; text-align: left; width: 230px; height:64px; padding-left: 10px; } #CColor { text-align: left; width: 230px; height:48px; } #st { border: 1px solid #C0C0C0; background-color: #C0C0C0; } #line { background-color: #C0C0C0; width: 980px; height: 4px; font-size: 4px; } #Def { border:1px solid #C0C0C0; width: 240px; } #anti{ border:1px solid #C0C0C0; width: 240px; height: 160px; } #endbar { font-size: 10px; color: #123456; border: 1px solid #C0C0C0; background-color: #C0C0C0; } input { background-color: #FFFFFF; } /* ------------------------------------------ */ div.TabPage{ border: 1px solid #C0C0C0; width: 100px; text-align: center; float: left; cursor: pointer; margin-right: 3px; } #vText { padding: 10px; margin: 10px; width: 100%; height: auto; border: medium double #000000; text-align: left; } #TabsLine{ padding: 2px; margin-left:10px; margin-top:10px; width: 100%; height: 24px; } #vText P.c { text-indent: 24px; font-size:small; } /* ------------------------------------------ */</style> </head> <body οnlοad="Tabpress(1)"> <div id=line></div> <div id="title">140网页预定义色配色测试页V3.4【最终版】</div> <div id="main"> <div id="TestArea"> <div id=st>测试文字显示区域</div> <div id="TabsLine"> <div class="TabPage" id="Tab1" οnclick="Tabpress(1)">ASCII字符</div> <div class="TabPage" id="Tab1" οnclick="Tabpress(2)">中文汉字</div> <div class="TabPage" id="Tab2" οnclick="Tabpress(3)">图形字体</div> <div class="TabPage" id="Tab3" οnclick="Tabpress(4)">Unicode</div> </div> <div id="vText"> </div> </div> <div id="ColorBox"> <div id="colorshow"> <div style="width: 238px; height: 21px" id=st>颜色值</div> <div id="fontcolor">选定的前景色：</div> <div style="width:230px; line-height: 1px; background-color:#C0C0C0"> </div> <div id="backcolor">选定的背景色：</div> </div> <div id="empty"></div> <div id="colors"> <div style="width: 238px; height: 16px" id=st>调色盒</div> <div> <div id=""> <div id="empty"> </div> <div id="CColor"></div> <div style="width:230px; line-height: 1px; background-color:#C0C0C0"> </div> <form name="form2_select"> <p align="center"> <input type="radio" value="FTC" name="C1" checked>前景色 <input type="radio" value="BGC" name="C1" >背景色 </form></div> <form name="Form1_ColorBox"> <mce:script language =javascript></mce:script> </form></div></div> <div id="empty" style="width: 230px"></div> <div id="Def"> <div id="st" style="width: 240px; height: 15px">自定义</div> <form name="defc"> <div id="">前景：<input type="text" name="Def1" id="Def1" size="7" style="border:1px solid #808080; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;border-bottom-style: solid; border-bottom-width: 1px" mce_style="border:1px solid #808080; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;border-bottom-style: solid; border-bottom-width: 1px"></div> <div id="">背景：<input type="text" name="Def2" id="Def2" size="7" style="border:1px solid #808080; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;border-bottom-style: solid; border-bottom-width: 1px" mce_style="border:1px solid #808080; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;border-bottom-style: solid; border-bottom-width: 1px"></div> <div style="border:1px solid #C0C0C0; width: 42px; height:13px" οnclick="def();"><span style="CURSOR: hand; background-color:#c0c0c0;" mce_style="CURSOR: hand; background-color:#c0c0c0;">确定</span></div> </form> </div> <div id="empty" style="width: 230px"></div> <div id="anti"> <div id="st" style="width: 240px; height: 15px">反转色</div> <form name="fanti"> <div id="">请输入个颜色值：#<input type="text" name="Def3" id="Def3" size="6" style="border:1px solid #808080; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;border-bottom-style: solid; border-bottom-width: 1px" mce_style="border:1px solid #808080; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;border-bottom-style: solid; border-bottom-width: 1px"> <span style="background-color:#c0c0c0;CURSOR: hand;" mce_style="background-color:#c0c0c0;CURSOR: hand;" οnclick="antinfo()">查询</span></div> </form> <div id="antiBG"style="width: 200px; height: 75px; float: center;"> <div id="antiFG"style="width: 160px; height: 30px; margin: 20px; text-align: center; "></div> </div> </div> <div id="empty" style="height: 8px; width: 980px"></div> <div id="endbar"><b>精灵之家荣誉出品</b> 转载必须保留此信息作者：双色心</div> </div> </div> </body> </html>

将代码保存为*.html格式文件，就可以在浏览器里打开并使用了。

不需要服务器和数据库等方面的支持。

所用代码只限于JS和DIV+CSS。

如果浏览器弹出安全提示，可以放心通过，代码你也看到了，不会有问题。

electricperi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
140网页配色测试页V3.4（最终版）源码

这是最后一版了，今后不再更新了。相对旧版本：加宽了网页显示。这个工具起源于多年前，当时网页还是800px的窄版式，于是扩宽。增加了反转色查询。方便于使用对比色配色。效果浏览做了标签页切换，页面长度大大减小。 140网页预定义色配色测试页V3.4 【宽版】<!--//本程序内置了140种系统预定义色彩值var color_name=new
复制链接

扫一扫