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>