【分享】一个好看的文本框和按钮组合-html在线预览功能jb51里提取的

2022-01-06 14:03:57 阅读：206 来源： 互联网

标签：HTML jb51 color 文本框 1px html background border CSS

这几天，找了很多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

演示地址：

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

标签：HTML,jb51,color,文本框,1px,html,background,border,CSS
来源： https://www.cnblogs.com/xsbz/p/htmlyx.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【分享】一个好看的文本框和按钮组合-html在线预览功能jb51里提取的

演示地址：