浏览器编辑HTML
运行效果：
浏览器编辑HTML
.boxes { text-align: left; font-size: 18px; width: 800px; height: 300px; color: rgba(77, 144, 254, 1); font-weight: bold; background: rgba(243, 247, 252, 1); border: 1px solid rgba(77, 144, 254, 1); border-radius: 3px }
.boxes2 { text-align: left; font-size: 18px; width: 750px; height: 300px; color: rgba(77, 144, 254, 1); font-weight: bold; background: rgba(243, 247, 252, 1); border: 1px solid rgba(77, 144, 254, 1); border-radius: 3px }
.run_btn { border-radius: 3px; background: rgba(77, 144, 254, 1); border: 1px solid rgba(77, 144, 254, 1); display: inline-block; vertical-align: middle; color: rgba(243, 247, 252, 1); font-weight: bold; width: 100px; font-size: 18px; height: 41px }
.run_btn:hover { background: rgba(24, 116, 205, 1) }
.del_btn { border-radius: 3px; background: rgba(240, 203, 133, 1); border: 1px solid rgba(240, 203, 133, 1); cursor: pointer; display: inline-block; vertical-align: middle; color: rgba(220, 20, 60, 1); font-weight: bold; width: 100px; font-size: 18px; height: 41px }
.del_btn:hover { background: rgba(222, 184, 135, 1) }
.cen { text-align: center }
li { position: relative }
li a { display: block; color: rgba(51, 153, 51, 1) }
ul li input[type=”checkbox”] { position: absolute; top: 0; width: 100%; height: 24px; opacity: 0 }
ul li input[type=”checkbox”]:not(:checked)+ul { display: none }
test.html
HTML源码：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>浏览器编辑HTML</title> <script language="JavaScript" type="text/JavaScript"> //运行文本域代码 function runEx(cod1) { cod=document.all(cod1) var code=cod.value; if(code==""){ alert(\'内容为空，请输入内容！\'); } if (code!=""){ var newwin=window.open(\'\',\'\',\'\'); //打开一个窗口并赋给变量newwin。 newwin.opener = null // 防止代码对论谈页面修改 newwin.document.write(code); //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。 newwin.document.close(); } } function quickdelete(cod2){ cod=document.all(cod2) var code=cod.value; if(code==""){ alert(\'无需重复点击，内容已经为空！\'); } document.getElementById(cod2).value =""; } </script> <style type="text/css"> .boxes{ text-align: left; font-size: 18px; width: 1150px; height: 400px; color: #4d90fe; font-weight: bold; margin-left: 100px; background: #f3f7fc; border: 1px solid #4d90fe; border-radius: 3px 3px 3px 3px; } .boxes2{ text-align: left; font-size: 18px; width: 1150px; height: 300px; color: #4d90fe; font-weight: bold; margin-left: 100px; background: #f3f7fc; border: 1px solid #4d90fe; border-radius: 3px 3px 3px 3px; } .run_btn { border-radius: 3px 3px 3px 3px; background: #4d90fe; border: 1px solid #4d90fe; display: inline-block; vertical-align: middle; color: #f3f7fc; font-weight: bold; width: 100px; font-size: 18px; height: 41px; cursor: hand; } .run_btn:hover{background:#1874CD} .delete_btn{ border-radius: 3px 3px 3px 3px; background: #F0CB85; border: 1px solid #F0CB85; cursor: pointer; display: inline-block; vertical-align: middle; color: #DC143C; font-weight: bold; width: 100px; font-size: 18px; height: 41px; } .delete_btn:hover{background:#DEB887} .cen{ text-align: center; } *{ margin: 0; padding: 0; } li{ background: #EEE; line-height: 24px; display: block; position: relative; color:red; } li a{ line-height: 24px; display: block; color: red; margin-left: 20px; text-align: center; } li a:hover{ color: red; } ul li input[type="checkbox"]{ position: absolute; top: 0; width: 100%; height: 24px; opacity: 0; cursor: hand; } ul li input[type="checkbox"]:not(:checked) + ul { display: none; cursor: hand; } #text{ font-size:20px; margin-left:200px; color:red; cursor: hand; } </style> </head> <body background="http://images2015.cnblogs.com/blog/512541/201511/512541-20151124231305937-1592292858.jpg" bgproperties="fixed" style="background: #f3f7fc;" > <p style="text-align: center;color: blue;font-weight: bold;">test.html</p> <textarea class="boxes" name="textarea" cols="100" rows="26" id="rn01"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>浏览器HTML运行</title> </head> <body> <h1>请输入你想要输入的内容</h1> <p>内容最好不要为空，否则没有显示效果</p> </body> </html> </textarea> <hr /> <form class="cen"> <input class="run_btn" onClick="runEx(\'rn01\')" type="button" value="运行代码"> <input class="delete_btn" onClick="quickdelete(\'rn01\')" type="button" value="清空代码"> </form> <ul> <li><a>不想写开头，参考一下HTML开头吧！</a> <input type="checkbox" name="list" /> <ul> <li> <textarea class="boxes2"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> <h1>请输入你想要输入的内容</h1> <p>内容最好不要为空，否则没有显示效果</p> </body> </html> </textarea> </li> <li><a href="http://www.cnblogs.com/tufujie" target="_blank" title="点击进入追梦人...博客首页">如有疑问，可直接访问：追梦人...博客首页</a></li> </ul> </li> </ul> </body> </html>