码迷,mamicode.com
首页 > Web开发 > 详细

DIV+CSS实现仿京东商城导航条效果

时间:2018-11-05 13:33:42      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:w3c   list   letter   .class   class   类别   flow   推广   pointer   

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3 <html xmlns="http://www.w3.org/1999/xhtml">
  4 <head>
  5 <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
  6 <title>京东商城导航条</title>
  7 <style type="text/css">
  8 .my_left_category{
  9 width:150px;
 10 font-size:12px;
 11 font-family:arial,sans-serif;
 12 letter-spacing:2px;
 13 }
 14 .my_left_category h1{
 15 background-image:url(images/spring_06.gif);
 16 height:20px;
 17 background-repeat:no-repeat;
 18 font-size:14px;
 19 font-weight:bold;
 20 padding-left:15px;
 21 padding-top:8px;
 22 margin:0px;
 23 color:#FFF;
 24 }
 25 .my_left_category .my_left_cat_list{
 26 width:148px;
 27 border-color:#b60134;
 28 border-style:solid;
 29 border-width:0px 1px 1px 1px;
 30 line-height:13.5pt;
 31 }
 32 .my_left_category .my_left_cat_list h2 {
 33 margin:0px;
 34 padding:3px 5px 0px 9px;
 35 }
 36 .my_left_category .my_left_cat_list h2 a {
 37 color:#d6290b;
 38 font-weight:bold;
 39 font-size:14px;
 40 line-height:22px;
 41 }
 42 .my_left_category .my_left_cat_list h2 a:hover {
 43 color:#d6290b;
 44 font-weight:bold;
 45 font-size:14px;
 46 line-height:22px;
 47 }
 48 .my_left_category .h2_cat{
 49 width:148px;
 50 height:26px; 
 51 background-image:url(images/my_menubg.gif);
 52 background-repeat:no-repeat; 
 53 line-height:26px;
 54 font-weight:normal;
 55 color:#333333;
 56 position:relative;
 57 }
 58 .my_left_category .h2_cat_1{
 59 width:148px;
 60 height:26px; 
 61 background-image:url(images/my_menubg_1.gif);
 62 background-repeat:no-repeat; 
 63 line-height:26px;
 64 font-weight:normal;
 65 color:#333333;
 66 position:relative;
 67 }
 68 .my_left_category a{
 69 font:12px;
 70 text-decoration:none;
 71 color:#333333;
 72 }
 73 .my_left_category a:hover{
 74 text-decoration:underline;
 75 color:#ff3333;
 76 }
 77 .my_left_category h3{
 78 margin:0px; 
 79 padding:0px;
 80 height:26px; 
 81 font-size:12px; 
 82 font-weight:normal;
 83 display:block; 
 84 padding-left:8px;
 85 }
 86 .my_left_category h3 span{color:#999999; width:145px; float:right;}
 87 .my_left_category h3 a{ line-height:26px;}
 88 .my_left_category .h3_cat{
 89 display:none;
 90 width:204px;
 91 position:absolute; 
 92 left:123px; 
 93 margin-top:-26px; 
 94 cursor:auto;
 95 }
 96 .my_left_category .shadow{
 97 position:inherit;
 98 background:url(images/shadow_04.gif) left top;
 99 width:204px;
100 }
101 .my_left_category .shadow_border{
102 position:inherit; 
103 width:200px; 
104 border:1px solid #959595; margin-top:1px; 
105 border-left-width:0px; 
106 background:url(images/shadow_border.gif) no-repeat 0px 21px; 
107 background-color:#ffffff; 
108 margin-bottom:3px
109 }
110 .my_left_category .shadow_border ul{margin:0; padding:0; margin-left:15px}
111 .my_left_category .shadow_border ul li {
112 list-style:none;
113 padding-left:10px;
114 background-image:url(images/my_cat_sub_menu_dot.gif);
115 background-repeat:no-repeat;
116 background-position:0px 8px;
117 float:left;
118 width:75px;
119 height:26px;
120 overflow:hidden;
121 letter-spacing:0px;
122 } 
123 .my_left_category .active_cat{ z-index:99;background-position:0 -25px;cursor:pointer;}
124 .my_left_category .active_cat h3 { font-weight:bold}
125 .my_left_category .active_cat h3 span{ display:none;} 
126 .my_left_category .active_cat div{display:block;} 
127 </style>
128 </head>
129 <body>
130 <div class="my_left_category">
131 <h1>分类导航</h1>
132 <div class="my_left_cat_list">
133 <h2><a href="#">按网站类别</a></h2>
134 <div class="h2_cat" onmouseover="this.className=‘h2_cat active_cat‘" onmouseout="this.className=‘h2_cat‘">
135 <h3><a href="#">企业建站</a></h3>
136 <div class="h3_cat">
137 <div class="shadow">
138 <div class="shadow_border">
139 <ul>
140 <li><a href="#">LOGO设计</a></li>
141 <li><a href="#">网站设计</a></li>
142 <li><a href="#">网站广告</a></li>
143 <li><a href="#">推广</a></li>
144 <li><a href="#">建网站</a></li>
145 <li><a href="#">网站推广</a></li>
146 <li><a href="#">网站建设</a></li>
147 <li><a href="#">SEO</a></li>
148 </ul>
149 </div>
150 </div>
151 </div> 
152 </div> 
153 <div class="h2_cat" onmouseover="this.className=‘h2_cat active_cat‘" onmouseout="this.className=‘h2_cat‘">
154 <h3><a href="#">韩国男装</a></h3>
155 <div class="h3_cat">
156 <div class="shadow">
157 <div class="shadow_border">
158 <ul>
159 <li><a href="#">LOGO设计</a></li>
160 <li><a href="#">网站设计</a></li>
161 <li><a href="#">网站广告</a></li>
162 <li><a href="#">推广</a></li>
163 <li><a href="#">建网站</a></li>
164 <li><a href="#">网站推广</a></li>
165 <li><a href="#">网站建设</a></li>
166 <li><a href="#">SEO</a></li>
167 </ul>
168 </div>
169 </div> 
170 </div> 
171 </div> 
172 <div class="h2_cat" onmouseover="this.className=‘h2_cat active_cat‘" onmouseout="this.className=‘h2_cat‘">
173 <h3><a href="#">脚本之家</a></h3>
174 <div class="h3_cat">
175 <div class="shadow">
176 <div class="shadow_border">
177 <ul>
178 <li><a href="#">LOGO设计</a></li>
179 <li><a href="#">源码下载</a></li>
180 <li><a href="#">最新更新</a></li>
181 <li><a href="#">下载排行</a></li>
182 <li><a href="#">ASP</a></li>
183 <li><a href="#">PHP</a></li>
184 <li><a href="#">AJAX</a></li>
185 <li><a href="#">DELPHI</a></li>
186 </ul>
187 </div>
188 </div> 
189 </div> 
190 </div> 
191 <!-- again -->
192 <h2><a href="#">按品牌选货</a></h2>
193 <div class="h2_cat" onmouseover="this.className=‘h2_cat active_cat‘" onmouseout="this.className=‘h2_cat‘">
194 <h3><a href="#" style="color:#ff3333;">热销推荐</a></h3>
195 <div class="h3_cat">
196 <div class="shadow">
197 <div class="shadow_border">
198 <ul>
199 <li><a href="#">LOGO设计</a></li>
200 <li><a href="#">网站设计</a></li>
201 <li><a href="#">网站广告</a></li>
202 <li><a href="#">推广</a></li>
203 <li><a href="#">建网站</a></li>
204 <li><a href="#">网站推广</a></li>
205 <li><a href="#">网站建设</a></li>
206 <li><a href="#">SEO</a></li>
207 </ul>
208 </div>
209 </div>
210 </div> 
211 </div> 
212 <div class="h2_cat" onmouseover="this.className=‘h2_cat active_cat‘" onmouseout="this.className=‘h2_cat‘">
213 <h3><a href="#">网站建设</a></h3>
214 <div class="h3_cat">
215 <div class="shadow">
216 <div class="shadow_border">
217 <ul>
218 <li><a href="#">LOGO设计</a></li>
219 <li><a href="#">网站设计</a></li>
220 <li><a href="#">推广</a></li>
221 <li><a href="#">建网站</a></li>
222 <li><a href="#">网站推广</a></li>
223 <li><a href="#">推广</a></li>
224 <li><a href="#">LOGO设计</a></li>
225 <li><a href="#">网站设计</a></li>
226 <li><a href="#">网站广告</a></li>
227 <li><a href="#">推广</a></li>
228 <li><a href="#">建网站</a></li>
229 <li><a href="#">网站推广</a></li>
230 <li><a href="#">网站建设</a></li>
231 <li><a href="#">LOGO设计</a></li>
232 <li><a href="#">网站设计</a></li>
233 <li><a href="#">网站建设</a></li>
234 <li><a href="#">SEO</a></li>
235 </ul>
236 </div>
237 </div> 
238 </div> 
239 </div> 
240 <div class="h2_cat" onmouseover="this.className=‘h2_cat active_cat‘" onmouseout="this.className=‘h2_cat‘">
241 <h3><a href="#">网站程序</a></h3>
242 <div class="h3_cat">
243 <div class="shadow">
244 <div class="shadow_border">
245 <ul>
246 <li><a href="#">PHP</a></li>
247 <li><a href="#">ASP</a></li>
248 <li><a href="#">JSP</a></li>
249 <li><a href="#">ASP.Net</a></li>
250 </ul>
251 </div>
252 </div> 
253 </div> 
254 </div> 
255 <div class="h2_cat_1" onmouseover="this.className=‘h2_cat_1 active_cat‘" onmouseout="this.className=‘h2_cat_1‘">
256 <h3><a href="#">其他网站</a></h3>
257 </div>
258 <!-- again -->
259 <h2><a href="#">按价格选货</a></h2>
260 <div class="h2_cat" onmouseover="this.className=‘h2_cat active_cat‘" onmouseout="this.className=‘h2_cat‘">
261 <h3><a href="#">低端价位</a></h3>
262 <div class="h3_cat">
263 <div class="shadow">
264 <div class="shadow_border">
265 <ul>
266 <li><a href="#">50元以下</a></li>
267 <li><a href="#">50-100元</a></li>
268 </ul>
269 </div>
270 </div>
271 </div> 
272 </div> 
273 <div class="h2_cat" onmouseover="this.className=‘h2_cat active_cat‘" onmouseout="this.className=‘h2_cat‘">
274 <h3><a href="#">中高端价位</a></h3>
275 <div class="h3_cat">
276 <div class="shadow">
277 <div class="shadow_border">
278 <ul>
279 <li><a href="#">100-150元</a></li>
280 <li><a href="#">150-200元</a></li>
281 <li><a href="#">200-300元</a></li>
282 <li><a href="#">300元以上</a></li>
283 </ul>
284 </div>
285 </div> 
286 </div> 
287 </div> 
288 <!-- again -->
289 <h2><a href="#">超值特价区</a></h2>
290 <h2><a href="#">现货区</a></h2>
291 <!--测试复制end--> 
292 </div>
293 </div> 
294 </body>
295 </html>

 

DIV+CSS实现仿京东商城导航条效果

标签:w3c   list   letter   .class   class   类别   flow   推广   pointer   

原文地址:https://www.cnblogs.com/zijue/p/9908572.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!