HTML,CSS，JS小实例
eg1：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">#ICtable{font-family: "微软雅黑";width: 80%;border-collapse: collapse;text-align: center;margin: auto;}th{font-size: 20px;padding: 5px 0;background: #A7C942;color: #fff;}td{font-size: 16px;border: 1px solid #98bf21;padding: 5px 7px;}tr:nth-of-type(odd) td {background-color: #EAF2D3;}</style><script></script></head><body><table id="ICtable"><tr><th>指令寻址</th><th>SYS_12</th><th>SYS_13</th><th>SYS_14</th><th>SYS_15</th></tr><tr><td>ROM空间</td><td>1K</td><td>2K</td><td>4K</td><td>5K</td></tr><tr><td>BYTE寻址</td><td>ALL</td><td>ALL</td><td>ALL</td><td>ALL</td></tr><tr><td>WORD寻址</td><td>0~0x1F</td><td>0~0x1F</td><td>0~0x1F</td><td>ALL</td></tr><tr><td>BIT寻址</td><td>0~0x1F</td><td>0~0x1F</td><td>ALL</td><td>ALL</td></tr></table></body>
</html>
效果图：
eg2:
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title></title><style type="text/css">div{width: 200px;height: 100px;float:left;border: 1px solid black;margin: 10px;}</style><script>window.onload=function (){var aDiv=document.getElementsByTagName("div");for(var i=0;i<aDiv.length;i++){aDiv[i].style.background="green";}}</script>
</head>
<body><div></div><div></div><div></div><div></div>
</body>
</html>
eg3:选项卡
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><style>#div1 .active{background: yellow;}#div1 div{width: 200px;height: 200px;background: #CCC;border: 1px solid #999;display: none;}</style>
<script>window.onload=function (){var oDiv=document.getElementById("div1");var aBtn=oDiv.getElementsByTagName("input");var aDiv=oDiv.getElementsByTagName("div");for(var i=0;i<aBtn.length;i++){aBtn[i].index=i;aBtn[i].onclick=function (){for(var i=0;i<aBtn.length;i++){aBtn[i].className="";aDiv[i].style.display="none";}this.className="active";aDiv[this.index].style.display="block";}}}
</script>
</head>
<body><div id="div1"><input class="active" type="button" value="C++" /><input type="button" value="C#" /><input type="button" value="Java" /><input type="button" value="Python" /><div style="display:block;">C++擅长面向对象程序设计，还可以进行基于过程的程序设计</div><div>C#是微软公司在2000年6月发布的一种新的编程语言</div><div>Java是由Sun Microsystems公司于1995年5月推出的</div><div>Python是一种跨平台的计算机程序设计语言</div></div>
</body>
</html>
HTML,CSS，JS小实例
eg1：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">#ICtable{font-family: "微软雅黑";width: 80%;border-collapse: collapse;text-align: center;margin: auto;}th{font-size: 20px;padding: 5px 0;background: #A7C942;color: #fff;}td{font-size: 16px;border: 1px solid #98bf21;padding: 5px 7px;}tr:nth-of-type(odd) td {background-color: #EAF2D3;}</style><script></script></head><body><table id="ICtable"><tr><th>指令寻址</th><th>SYS_12</th><th>SYS_13</th><th>SYS_14</th><th>SYS_15</th></tr><tr><td>ROM空间</td><td>1K</td><td>2K</td><td>4K</td><td>5K</td></tr><tr><td>BYTE寻址</td><td>ALL</td><td>ALL</td><td>ALL</td><td>ALL</td></tr><tr><td>WORD寻址</td><td>0~0x1F</td><td>0~0x1F</td><td>0~0x1F</td><td>ALL</td></tr><tr><td>BIT寻址</td><td>0~0x1F</td><td>0~0x1F</td><td>ALL</td><td>ALL</td></tr></table></body>
</html>
效果图：
eg2:
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title></title><style type="text/css">div{width: 200px;height: 100px;float:left;border: 1px solid black;margin: 10px;}</style><script>window.onload=function (){var aDiv=document.getElementsByTagName("div");for(var i=0;i<aDiv.length;i++){aDiv[i].style.background="green";}}</script>
</head>
<body><div></div><div></div><div></div><div></div>
</body>
</html>
eg3:选项卡
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><style>#div1 .active{background: yellow;}#div1 div{width: 200px;height: 200px;background: #CCC;border: 1px solid #999;display: none;}</style>
<script>window.onload=function (){var oDiv=document.getElementById("div1");var aBtn=oDiv.getElementsByTagName("input");var aDiv=oDiv.getElementsByTagName("div");for(var i=0;i<aBtn.length;i++){aBtn[i].index=i;aBtn[i].onclick=function (){for(var i=0;i<aBtn.length;i++){aBtn[i].className="";aDiv[i].style.display="none";}this.className="active";aDiv[this.index].style.display="block";}}}
</script>
</head>
<body><div id="div1"><input class="active" type="button" value="C++" /><input type="button" value="C#" /><input type="button" value="Java" /><input type="button" value="Python" /><div style="display:block;">C++擅长面向对象程序设计，还可以进行基于过程的程序设计</div><div>C#是微软公司在2000年6月发布的一种新的编程语言</div><div>Java是由Sun Microsystems公司于1995年5月推出的</div><div>Python是一种跨平台的计算机程序设计语言</div></div>
</body>
</html>