<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.dv { width:800px; height:600px; text-align:center;}
.td2 { width:80px; height:30px; border:solid #CCC 1px; background:#F00; color:#FFF; text-align:center; position:relative;}
.dv1 { width:150px; height:150px; border:solid #000 3px;}
.dv2 { width:300px; height:250px; border:solid #CCC 20px; position:absolute; top:100px; left:460px; display:none; background:#FFF;}
.td3 { width:30px; height:30px; border:solid #999 1px; text-align:center; color:#FFF;}
.td4 { width:30px; height:30px; border:solid #999 1px; text-align:center; color:#666; background:#CCC;}
.td5 { width:60px; height:30px; border:solid #999 1px; text-align:center; color:#FFF; background:#009;}
.tb { padding-left:70px; padding-top:20px;}
</style>
<script>
window.onload=function(){
var td1=document.getElementById("td");
var dv0=document.getElementById("dva");
var dv1=document.getElementById("dvv");
var dv2=document.getElementById("dve");
var color1=document.getElementById("c1");
var color2=document.getElementById("c2");
var color3=document.getElementById("c3");
var width1=document.getElementById("w1");
var width2=document.getElementById("w2");
var width3=document.getElementById("w3");
var height1=document.getElementById("h1");
var height2=document.getElementById("h2");
var height3=document.getElementById("h3");
var re=document.getElementById("recover");
var su=document.getElementById("sure");
td1.onclick=function(){
dv2.style.display='block';
dv0.style.background='#999999';
}
color1.onclick=function(){
dv1.style.background='#F00';
}
color1.onmouseover=function(){
color1.style.background='#F00';
}
color1.onmouseout=function(){
color1.style.background='#99CC66';
}
color2.onclick=function(){
dv1.style.background='#FF0';
}
color2.onmouseover=function(){
color2.style.background='#FF0';
}
color2.onmouseout=function(){
color2.style.background='#CCCC00';
}
color3.onclick=function(){
dv1.style.background='#00F';
}
color3.onmouseover=function(){
color3.style.background='#00F';
}
color3.onmouseout=function(){
color3.style.background='#3399CC';
}
width1.onclick=function(){
dv1.style.width='200px';
}
width1.onmouseover=function(){
width1.style.background='#F90';
}
width1.onmouseout=function(){
width1.style.background='#CCC';
}
width2.onclick=function(){
dv1.style.width='300px';
}
width2.onmouseover=function(){
width2.style.background='#F90';
}
width2.onmouseout=function(){
width2.style.background='#CCC';
}
width3.onclick=function(){
dv1.style.width='400px';
}
width3.onmouseover=function(){
width3.style.background='#F90';
}
width3.onmouseout=function(){
width3.style.background='#CCC';
}
height1.onclick=function(){
dv1.style.height='200px';
}
height1.onmouseover=f