【分享】一个好看的文本框和按钮组合-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代码在线运行工具,用户在代码编辑框内填写需要运行的代码,点击“运行”按钮,即可在新弹出的页面中看到代码的运行效果,该工具还提供了测试代码供用户参考。免费提供给需要的朋友使用。

 

补充说明
  1. 本工具转载自:http://tools.jb51.net/code/HtmlJsRun
  2. 该工具非常简单易用,可直接在代码编辑框内输入代码点击“运行”,查看运行效果。并附带HTML/CSS/JavaScript演示Demo代码。
  3. 这里为大家推荐另一款在线HTML/CSS/JavaScript代码运行工具,代码风格类似jsfiddle:http://tools.jb51.net/code/WebCodeRun

演示地址:

https://cycy.sourceforge.io/html/

上一篇:动物相册——HTML效果


下一篇:列表页面(html+css+js)