2016/2/22 三级导航 

  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>

posted on 2016-02-22 22:15  一棵树2016  阅读(810)  评论(0)  编辑  收藏  举报