`

仿W3CSCHOOL的过行代码效果

    博客分类：
  • web
CSSHTMLJavaScriptXHTMLC 
阅读更多

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>

 

分享到：
| HTML <label> 标签
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    仿w3cschool整站源码 v1.5

    【标题】"仿w3cschool整站源码 v1.5"是一个基于PHP开发的网站源代码，其目标是模仿知名的在线学习平台W3CSchool的网站布局、功能和用户体验。这个源码版本为1.5，意味着它是对早期版本的改进，可能包括修复已知的...

    W3CSchool（全套教程最新版_2012)

    W3CSchool（全套教程最新W3CSchool（全套教程最新W3CSchool（全套教程最新W3CSchool（全套教程最新W3CSchool（全套教程最新W3CSchool（全套教程最新W3CSchool（全套教程最新W3CSchool（全套教程最新W3CSchool（全套...

    中文完整W3CSchool.chm

    《中文完整W3CSchool.chm》是一款专为中文用户设计的在线学习资源库，它以CHM（Compiled Help Manual）格式提供，包含了丰富的Web开发和技术教程。CHM是一种由微软开发的帮助文件格式，用于存储HTML文档和其他相关...

    常用web开发工具 w3cschool菜鸟教程20141021

    常用web开发工具 w3cschool菜鸟教程20141021常用web开发工具 w3cschool菜鸟教程20141021常用web开发工具 w3cschool菜鸟教程20141021常用web开发工具 w3cschool菜鸟教程20141021常用web开发工具 w3cschool菜鸟教程...

    W3Cschool官方手册离线版

    w3cschool官方手册离线版，最新中文版 w3cschool官方手册离线版，亲测可用

    W3CSchool.chm

    《W3CSchool离线文档：全面掌握Web前端技术的宝典》 W3CSchool.chm是一款专门针对Web开发者设计的离线教程资源，它包含了丰富的Web前端开发知识，让用户在没有网络的情况下也能深入学习和查阅相关技术。这个压缩包...

    w3cschool 全套手册 离线版

    最全最新的w3cschool开发手册

    w3cschool离线版教程chm版本2017年11月5号更新

    w3cschool离线版教程chm版本2017年11月5号更新。包含w3cschool的全部内容

    w3cschool中文教程.chm.zip

    《w3cschool中文教程》是一个综合性的在线学习资源，主要涵盖了互联网开发的多个关键领域。这个压缩包包含了HTML、CSS、XML、JavaScript (JS)、JSON、PHP、SQL、ASP、ADO、VB、Web技术、AJAX以及jQuery等多个主题的...

    W3Cschool 破解版离线教程

    破解版，W3Cschool 破解版离线教程，方便查找各种标签，是编程的好助手

    W3CSchool全套教程

    6. Web标准与最佳实践：W3CSchool还会教导你遵循W3C制定的Web标准，确保代码的可读性、可维护性和兼容性。此外，还会讲解编码规范、性能优化、SEO（搜索引擎优化）等相关知识。 7. 实战项目：除了理论知识，教程中...

    W3CSchool帮助文档

    此外，W3CSchool帮助文档通常还会包含一些实用工具，如代码编辑器、运行环境和实时预览功能，这些都极大地提升了学习体验。CHM（Compiled Help Manual）格式的文档使得所有信息都能快速检索，方便用户查找所需内容。...

    w3cschool电子版下载

    再者，“庞大的代码库”是W3CSchool的一大亮点。这个库包含了各种示例代码和实战项目，让开发者能在实践中学习和提高。你可以看到从简单的网页布局到复杂的交互设计，从数据库操作到服务器端脚本的实例，这些代码...

    w3cschool.cc

    标题 "w3cschool.cc" 暗示了这是一个与 web 开发教育平台 w3cschool.cc 相关的知识点。w3cschool.cc 是一个知名的在线学习平台，提供了广泛的 IT 技术教程，包括 HTML、CSS、JavaScript、PHP、SQL 以及各种 Web 开发...

    W3CSchool教程.chm

    这个压缩包中的核心资源即为"W3CSchool"文件，这可能是一个综合性的帮助文档，包含了HTML、CSS、JavaScript以及其他Web相关技术的详细教程。 一、HTML（HyperText Markup Language） HTML是网页内容的基础，它是...

    W3CSchool文档中文版

    《W3CSchool文档中文版》是一份非常全面的在线学习资源，专为中文用户设计，旨在帮助初学者和有经验的开发者深入理解和掌握网页制作技术。这份文档覆盖了从HTML、CSS到JavaScript等关键领域的知识，是互联网开发者的...

    w3cschool离线版

    《w3cschool离线版：开启Web技术学习新里程》 w3cschool，作为全球知名的在线编程学习平台，以其丰富的教程资源、简洁易懂的讲解方式深受广大程序员和初学者的喜爱。而现在，我们拥有了w3cschool的离线版，这意味着...

    w3cschool菜鸟教程

    在《w3cschool菜鸟教程》中，每个主题都会提供实例代码、解释和练习，以帮助学习者深入理解并实践这些技术。通过这个教程，你可以逐步建立起对Web开发的理解，为后续的进阶学习打下坚实的基础。在学习过程中，不断...

    w3cschool菜鸟教程（w3cschool.cc）.7z

    这个压缩包文件包含了该平台的部分教学资源，主要是一个名为“w3cschool菜鸟教程（w3cschool.cc）.chm”的帮助文档。 CHM文件是微软编写的“Compiled HTML Help”文件，它将一系列HTML页面打包成一个单一的文件，...

Magicbox
Global site tag (gtag.js) - Google Analytics