【分享】一个好看的文本框和按钮组合-html在线预览功能jb51里提取的
这几天，找了很多CSS的网站，自己研究弄了个兼容性不错的框体和按钮的模板，分享给大家用一下，顺便分项一个编码的工具，都在框体里面了，因为博客园发帖会屏蔽一些js功能，所以上一篇随笔中，没有应该有的效果。废话不多说了，收下：
1 <style> 2 .cyan { 3 background-color: #34A853; /* 绿色 */ 4 border: none; 5 color: white; 6 padding: 8px 32px; 7 text-align: center; 8 text-decoration: none; 9 display: inline-block; 10 font-size: 14px; 11 margin: 4px 2px; 12 cursor: pointer; 13 border-radius: 4px; 14 font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "PingFang SC", "Hiragino Sans GB", "STHeiti Light", "Microsoft YaHei", "WenQuanYi Micro Hei"; 15 } 16 .cyan:hover { 17 box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); 18 } 19 .cyan2 {background-color: #4285f4;} /* 蓝色 */ 20 .cyan3 {background-color: #ea4335;} /* 红色 */ 21 .cyan4 {background-color: #757575; color: black;} /* 灰色 */ 22 .cyan5 {background-color: #555555;} /* 黑色 */ 23 .cyan6 {background-color: #fbbc05;} /* 黄色 */ 24 25 div.cyc { 26 margin: 0px 0px 5px; padding: 5px; border: 1px solid rgb(212, 212, 212); border-image: none; width: 99%; color: rgb(0, 0, 0); background-image: linear-gradient(rgb(255, 255, 255), rgb(229, 238, 204) 100px); background-color: rgb(229, 238, 204); 27 } 28 textarea{ 29 30 resize:none; 31 32 } 33 .cyk { 34 padding: 6px 12px; border-radius: 4px; border: 1px solid rgb(204, 204, 204); transition:border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; border-image: none; width: 99%; color: rgb(85, 85, 85); font-size: 14px; display: block; box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075); background-image: none; background-color: rgb(255, 255, 255); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 35 } 36 .cyk:focus { 37 border-color: rgb(102, 175, 233); outline: 0px; box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.6); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); 38 } 39 .cytxt { 40 display: font-size: 16px; color: #303030; line-height: 1.2; font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "PingFang SC", "Hiragino Sans GB", "STHeiti Light", "Microsoft YaHei", "WenQuanYi Micro Hei"; word-wrap: break-word; word-break: break-all; ove flow: hidden; line-height:28px; 41 } 42 .cytxtbak { 43 display: inline-block; font-size: 16px; color: #303030; line-height: 1.2; font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "PingFang SC", "Hiragino Sans GB", "STHeiti Light", "Microsoft YaHei", "WenQuanYi Micro Hei"; word-wrap: break-word; word-break: break-all; ove flow: hidden; 44 } 45 </style> 46 <div class="cyc"><div class="cytxt" style="font-size:20px; text-align: center; font-weight:bold">在线HTML/CSS/JavaScript代码运行工具</div> 47 <div class="cytxt" style="font-size:15px;">这是一款非常简单实用的HTML/CSS/JavaScript代码在线运行工具，用户在代码编辑框内填写需要运行的代码，点击“运行”按钮，即可在新弹出的页面中看到代码的运行效果，该工具还提供了测试代码供用户参考。免费提供给需要的朋友使用。</div> 48 <div><textarea id="codearea" placeholder="将HTML、CSS或JavaScript代码粘贴在此处，点击运行即可。" class="cyk" style="height:200px;"></textarea></div> 49 <br/> 50 <div align="center"> 51 <input id="btrun" class="cyan" href="javascript:void(0);" hidefocus="true" value="运行" type="button"> 52 <input id="htmlDemo" class="cyan cyan2" href="javascript:void(0);" hidefocus="true" value="HTML/CSS示例代码" type="button"> 53 <input id="jsDemo" class="cyan cyan3" href="javascript:void(0);" hidefocus="true" value="JavaScript示例代码" type="button"> 54 <input id="btclear" class="cyan cyan6" href="javascript:void(0);" hidefocus="true" value="清空" type="button"> 55 <input class="cyan cyan5" type="button" value="复制" onclick="copyinput()"/> 56 </div></div> 57 <script> 58 (function() { 59 t = document.getElementById("codearea"), 60 n = document.getElementById("btclear"), 61 hd = document.getElementById("htmlDemo"), 62 jd = document.getElementById("jsDemo"), 63 r = document.getElementById("btrun"); 64 n.onclick = function() { 65 t.value = "", 66 t.focus() 67 }, 68 hd.onclick = function() {//HTML/CSS示例demo 69 t.value = "<style>\n.alert-success {\n color: #3c763d;\n background-color: #dff0d8;\n border-color: #d6e9c6;\n border-radius: 4px;\n padding: 15px;\n}\n</style>\n<div class=\"alert-success\">这里演示带圆角边框的说明文字html+css样式<\/div>", 70 t.focus() 71 }, 72 jd.onclick = function() {//JS示例demo 73 t.value = "<script>\nalert('此处演示JavaScript alert弹出框效果示例');\n<\/script>", 74 t.focus() 75 }, 76 r.onclick = function() { 77 var n = t.value; 78 if (n != "") { 79 var r = window.open("", "", ""); 80 r.opener = null, 81 r.document.write(n), 82 r.document.close() 83 } else alert("请将需要运行的HTML填写到输入框后再运行！", "alert", "运行提示") 84 } 85 })() 86 // 复制 87 function copyinput() 88 { 89 var input=document.getElementById("codearea");//input的ID值 90 input.select(); //选择对象 91 document.execCommand("Copy"); //执行浏览器复制命令 92 } 93 </script> 94 <br/> 95 <div class="cytxt" style="font-size:20px; font-weight:bold">补充说明</div> 96 <div class="cytxt" style="font-size:16px;"> 97 <ol> 98 <li>本工具转载自：http://tools.jb51.net/code/HtmlJsRun</li> 99 <li>该工具非常简单易用，可直接在代码编辑框内输入代码点击“运行”，查看运行效果。并附带HTML/CSS/JavaScript演示Demo代码。</li> 100 <li>这里为大家推荐另一款在线HTML/CSS/JavaScript代码运行工具，代码风格类似jsfiddle：<a href="http://tools.jb51.net/code/WebCodeRun" style="background:#f9f2f4; color:#c7254e; font-size:15px; padding:2px 8px;border-radius: 4px; text-decoration:none;">http://tools.jb51.net/code/WebCodeRun</a><br/> 101 <p>运行效果如下图所示：</p> 102 <p align="center"><img src="http://tools.jb51.net/images/WebCodeRun.jpg" /></p> 103 </li> 104 </ol> 105 </div>
在线HTML/CSS/JavaScript代码运行工具
这是一款非常简单实用的HTML/CSS/JavaScript代码在线运行工具，用户在代码编辑框内填写需要运行的代码，点击“运行”按钮，即可在新弹出的页面中看到代码的运行效果，该工具还提供了测试代码供用户参考。免费提供给需要的朋友使用。
补充说明
- 本工具转载自：http://tools.jb51.net/code/HtmlJsRun
- 该工具非常简单易用，可直接在代码编辑框内输入代码点击“运行”，查看运行效果。并附带HTML/CSS/JavaScript演示Demo代码。
- 这里为大家推荐另一款在线HTML/CSS/JavaScript代码运行工具，代码风格类似jsfiddle：http://tools.jb51.net/code/WebCodeRun
