仿W3CSCHOOL的过行代码效果
CSS文件
/* W3School 在线编辑工具 */body#editor{margin:0;padding:0;border:0;text-align:left;font: 12px Verdana, Arial, Helvetica, sans-serif;background:#4180B6;}div#header{color:#fff;margin:0;padding:0;border:0;height:90px;background:#4180B6;width:980px;}div#butt{height:40px;background:#C8D7E3;}div#test{margin:0;padding:0;border:0;height:495px;background:#4180B6;}div#code{float:left;height:435px;width:50%;margin:0;padding:0;border:0;background:#2C587C;}div#result{float:left;height:445px;width:49%;margin:0;padding:0;background:#880000;}#footer{clear:both;margin:0;padding:5px 0 5px 5px;border:0;background:#000;}#header h1{margin:20px 0 0 0;padding:0;font-size:30px;float:left;}#header #ad {float:left;margin:0 0 0 10px;}form{margin:0;padding:0;border:0;}#butt input {margin:10px 0 0 0;background:yellow;color:#293D6B;width:180px;font:12px Verdana, Arial, Helvetica, sans-serif;}#butt p {margin:0;}#butt span {margin:0 0 0 5px;color:#293D6B;}#code h2{margin:10px 0 6px 5px;padding:0;border:0;font-weight:bold;color:#eee;font-size:14px;}#result h2{margin:10px 0 6px 5px;padding:0;border:0;font-weight:bold;color:#eee;font-size:14px;}#code textarea{margin:0;padding:10px 0 0 5px;border:0;width:100%;overflow:auto;height:400px;font:12px "Courier New", Courier, monospace;}#result iframe{margin:0;padding:0;width:100%;height:410px;background:#fff;}#footer p{color:#666;margin:0;}a:link, a:visited {text-decoration : underline;color : #666;background : transparent; }a:hover {text-decoration : underline;color: #666;background : transparent; }a:active {text-decoration : underline;color : #666;background : transparent; }?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="zh-cn" /><link rel="stylesheet" type="text/css" href="tc.css" /><title>在线测试工具</title></head><body id="editor"><div id="test"><form action="" method="post" target="i"><div id="butt"><p><span><input name="button" type="button" onclick="runCode()" value="TRY IT YOURSELF"></input></span><span>（请在下面的文本框中编辑您的代码，然后单击此按钮测试结果。）</span></p></div><div id="code"><h2>编辑您的代码：</h2><textarea name="c" id="c"><html><body><p>请点击文本标记之一，就可以触发相关控件：</p><form><label for="male">Male</label><input type="radio" name="sex" id="male" /><br /><label for="female">Female</label><input type="radio" name="sex" id="female" /></form></body></html></textarea></div><div id="result"><h2>查看结果:</h2><iframe name="i" src=""></iframe></div></form></div></body></html><script type="text/javascript"><!--function runCode() { obj = document.getElementById("c"); if(obj.value==""){ alert("请输入要运行的代码内容"); return false;} var winname = document.frames.i; winname.document.open('text/html', 'replace'); winname.document.writeln(obj.value); winname.document.close();}runCode();//--></script>?