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