仿W3CSCHOOL的過行程式碼效果

maqianmaqian發表於2010-12-07
行程

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>

 

相關文章