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 * 8 { 9 margin:0px; 10 padding:0px;} 11 #d1 /*17个属性，分别对应，划分的十七个区域*/ 12 { 13 background-color:#0FF; 14 width:80px; 15 height:50px; 16 line-height:50px; 17 text-align:center; 18 overflow:hidden; 19 left:300px; 20 top:200px; 21 position:absolute; 22 } 23 #d2 24 { 25 top:50px; 26 left:0px; 27 position:absolute; 28 height:150px; 29 width:80px; 30 } 31 #dd1 32 { 33 background-color:#3F3; 34 text-align:center; 35 width:80px; 36 height:50px; 37 line-height:50px; 38 top:0px; 39 left:0px; 40 position:absolute; 41 overflow:hidden;} 42 #dd2 43 { 44 background-color:#CF3; 45 width:80px; 46 text-align:center; 47 height:50px; 48 line-height:50px; 49 top:50px; 50 left:0px; 51 position:absolute; 52 overflow:hidden;} 53 #dd3 54 { 55 background-color:#C0C; 56 width:80px; 57 height:50px; 58 text-align:center; 59 line-height:50px; 60 top:100px; 61 left:0px; 62 position:absolute; 63 overflow:hidden;} 64 #d3 65 { 66 background-color:#3F3; 67 left:80px; 68 top:0px; 69 height:150px; 70 width:80px; 71 position:absolute;} 72 #d4 73 { 74 background-color:#CF3; 75 left:80px; 76 top:0px; 77 height:150px; 78 width:80px; 79 position:absolute;} 80 #d5 81 { 82 background-color:#C0C; 83 left:80px; 84 top:0px; 85 height:150px; 86 width:80px; 87 position:absolute;} 88 #d31 89 { 90 height:50px; 91 width:80px; 92 line-height:50px; 93 text-align:center; 94 top:0px; 95 left:0px; 96 position:absolute;} 97 #d32 98 { 99 height:50px; 100 width:80px; 101 line-height:50px; 102 text-align:center; 103 top:50px; 104 left:0px; 105 position:absolute;} 106 #d33 107 { 108 height:50px; 109 width:80px; 110 line-height:50px; 111 text-align:center; 112 top:100px; 113 left:0px; 114 position:absolute;} 115 #d41 116 { 117 height:50px; 118 width:80px; 119 line-height:50px; 120 text-align:center; 121 top:0px; 122 left:0px; 123 position:absolute;} 124 #d42 125 { 126 height:50px; 127 width:80px; 128 line-height:50px; 129 text-align:center; 130 top:50px; 131 left:0px; 132 position:absolute;} 133 #d43 134 { 135 height:50px; 136 width:80px; 137 line-height:50px; 138 text-align:center; 139 top:100px; 140 left:0px; 141 position:absolute;} 142 #d51 143 { 144 height:50px; 145 width:80px; 146 line-height:50px; 147 text-align:center; 148 top:0px; 149 left:0px; 150 position:absolute;} 151 #d52 152 { 153 height:50px; 154 width:80px; 155 line-height:50px; 156 text-align:center; 157 top:50px; 158 left:0px; 159 position:absolute;} 160 #d53 161 { 162 height:50px; 163 width:80px; 164 line-height:50px; 165 text-align:center; 166 top:100px; 167 left:0px; 168 position:absolute;} 169 </style> 170 </head> 171 172 <body> 173 <div id="d1" onmouseover="over()" onmouseout="out()">首页 174 <div id="d2"> 175 <div id="dd1" onmouseover="overdd1()" onmouseout="outdd1()">招商 176 <div id="d3"> 177 <div id="d31">d31</div> 178 <div id="d32">d32</div> 179 <div id="d33">d33</div> 180 </div> 181 </div> 182 <div id="dd2" onmouseover="overdd2()" onmouseout="outdd2()">产品中心<div id="d4"><div id="d41">d41</div><div id="d42">d42</div><div id="d43">d43</div></div></div> 183 <div id="dd3" onmouseover="overdd3()" onmouseout="outdd3()">联系我们<div id="d5"><div id="d51">d51</div><div id="d52">d52</div><div id="d53">d53</div></div></div> 184 </div> 185 </div> 186 187 188 189 </body> 190 </html> 191 <script type="text/javascript"> 192 function over()/*八对关系*/ 193 { 194 var a = document.getElementById("d1"); 195 a.setAttribute("style","overflow:visible"); 196 } 197 function out() 198 { 199 var a = document.getElementById("d1"); 200 a.setAttribute("style","overflow:hidden"); 201 } 202 203 function overdd1() 204 { 205 var a = document.getElementById("dd1"); 206 a.setAttribute("style","overflow:visible"); 207 } 208 function outdd1() 209 { 210 var a = document.getElementById("dd1"); 211 a.setAttribute("style","overflow:hidden"); 212 } 213 214 function overdd2() 215 { 216 var a =document.getElementById("dd2"); 217 a.setAttribute("style","overflow:visible"); 218 } 219 function outdd2() 220 { 221 var a =document.getElementById("dd2"); 222 a.setAttribute("style","overflow:hidden"); 223 } 224 225 function overdd3() 226 { 227 var a =document.getElementById("dd3"); 228 a.setAttribute("style","overflow:visible"); 229 } 230 function outdd3() 231 { 232 var a =document.getElementById("dd3"); 233 a.setAttribute("style","overflow:hidden"); 234 } 235 </script>
