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 { 800px; height:600px; text-align:center;} 8 .td2 { 80px; height:30px; border:solid #CCC 1px; background:#F00; color:#FFF; text-align:center; position:relative;} 9 .dv1 { 150px; height:150px; border:solid #000 3px;} 10 .dv2 { 300px; height:250px; border:solid #CCC 20px; position:absolute; top:100px; left:460px; display:none; background:#FFF;} 11 .td3 { 30px; height:30px; border:solid #999 1px; text-align:center; color:#FFF;} 12 .td4 { 30px; height:30px; border:solid #999 1px; text-align:center; color:#666; background:#CCC;} 13 .td5 { 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>
