1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <style>
7 .dv { width:800px; height:600px; text-align:center;}
8 .td2 { width:80px; height:30px; border:solid #CCC 1px; background:#F00; color:#FFF; text-align:center; position:relative;}
9 .dv1 { width:150px; height:150px; border:solid #000 3px;}
10 .dv2 { width:300px; height:250px; border:solid #CCC 20px; position:absolute; top:100px; left:460px; display:none; background:#FFF;}
11 .td3 { width:30px; height:30px; border:solid #999 1px; text-align:center; color:#FFF;}
12 .td4 { width:30px; height:30px; border:solid #999 1px; text-align:center; color:#666; background:#CCC;}
13 .td5 { width:60px; height:30px; border:solid #999 1px; text-align:center; color:#FFF; background:#009;}
14 .tb { padding-left:70px; padding-top:20px;}
15 </style>
16 <script>
17 window.onload=function(){
18 var td1=document.getElementById("td");
19 var dv0=document.getElementById("dva");
20 var dv1=document.getElementById("dvv");
21 var dv2=document.getElementById("dve");
22 var color1=document.getElementById("c1");
23 var color2=document.getElementById("c2");
24 var color3=document.getElementById("c3");
25 var width1=document.getElementById("w1");
26 var width2=document.getElementById("w2");
27 var width3=document.getElementById("w3");
28 var height1=document.getElementById("h1");
29 var height2=document.getElementById("h2");
30 var height3=document.getElementById("h3");
31 var re=document.getElementById("recover");
32 var su=document.getElementById("sure");
33
34 td1.onclick=function(){
35 dv2.style.display='block';
36 dv0.style.background='#999999';
37 }
38
39 color1.onclick=function(){
40 dv1.style.background='#F00';
41 }
42 color1.onmouseover=function(){
43 color1.style.background='#F00';
44 }
45 color1.onmouseout=function(){
46 color1.style.background='#99CC66';
47 }
48
49 color2.onclick=function(){
50 dv1.style.background='#FF0';
51 }
52 color2.onmouseover=function(){
53 color2.style.background='#FF0';
54 }
55 color2.onmouseout=function(){
56 color2.style.background='#CCCC00';
57 }
58
59 color3.onclick=function(){
60 dv1.style.background='#00F';
61 }
62 color3.onmouseover=function(){
63 color3.style.background='#00F';
64 }
65 color3.onmouseout=function(){
66 color3.style.background='#3399CC';
67 }
68
69 width1.onclick=function(){
70 dv1.style.width='200px';
71 }
72 width1.onmouseover=function(){
73 width1.style.background='#F90';
74 }
75 width1.onmouseout=function(){
76 width1.style.background='#CCC';
77 }
78
79 width2.onclick=function(){
80 dv1.style.width='300px';
81 }
82 width2.onmouseover=function(){
83 width2.style.background='#F90';
84 }
85 width2.onmouseout=function(){
86 width2.style.background='#CCC';
87 }
88
89 width3.onclick=function(){
90 dv1.style.width='400px';
91 }
92 width3.onmouseover=function(){
93 width3.style.background='#F90';
94 }
95 width3.onmouseout=function(){
96 width3.style.background='#CCC';
97 }
98
99 height1.onclick=function(){
100 dv1.style.height='200px';
101 }
102 height1.onmouseover=function(){
103 height1.style.background='#F90';
104 }
105 height1.onmouseout=function(){
106 height1.style.background='#CCC';
107 }
108
109 height2.onclick=function(){
110 dv1.style.height='300px';
111 }
112 height2.onmouseover=function(){
113 height2.style.background='#F90';
114 }
115 height2.onmouseout=function(){
116 height2.style.background='#CCC';
117 }
118
119 height3.onclick=function(){
120 dv1.style.height='400px';
121 }
122 height3.onmouseover=function(){
123 height3.style.background='#F90';
124 }
125 height3.onmouseout=function(){
126 height3.style.background='#CCC';
127 }
128
129 re.onclick=function(){
130 dv1.style.width='150px';
131 dv1.style.height='150px';
132 dv1.style.background='none';
133 }
134
135 su.onclick=function(){
136 dv2.style.display='none';
137 dv0.style.background='none';
138 }
139 }
140 </script>
141 </head>
142
143 <body>
144 <div id="dva" class="dv">
145 <table>
146 <tr>
147 <td>
148 <strong>请为下面的DIV设置样式：</strong>
149 </td>
150 <td id="td" class="td2">
151 点击设置
152 </td>
153 </tr>
154 </table>
155 <div id="dvv" class="dv1">
156 </div>
157 <div id="dve" class="dv2">
158 <table cellspacing="10px">
159 <tr>
160 <td>请选择背景颜色：</td>
161 <td id="c1" class="td3" bgcolor="#99CC66">红</td>
162 <td id="c2" class="td3" bgcolor="#CCCC00">黄</td>
163 <td id="c3" class="td3" bgcolor="#3399CC">蓝</td>
164 </tr>
165 <tr>
166 <td>请选择宽(px)：</td>
167 <td id="w1" class="td4">200</td>
168 <td id="w2" class="td4">300</td>
169 <td id="w3" class="td4">400</td>
170 </tr>
171 <tr>
172 <td>请选择高(px)：</td>
173 <td id="h1" class="td4">200</td>
174 <td id="h2" class="td4">300</td>
175 <td id="h3" class="td4">400</td>
176 </tr>
177 </table>
178 <table class="tb" cellspacing="10px">
179 <tr>
180 <td id="recover" class="td5">恢复</td>
181 <td id="sure" class="td5">确定</td>
182 </tr>
183 </table>
184 </div>
185 </div>
186 </body>
187 </html>
